Is it possible to paste an image from the clipboard into an HTML5 game using HTML/javascript?

[Nathan Archer]

Hi, a month or so ago I managed to get an HTML5 game to import an uploaded file using a js_execute plugin, but I'm really unfamiliar with it and it's all really foreign to me.

I found some open-source code here that does it: https://codepen.io/netsi1964/pen/IoJbg

But I'm not sure if it's possible to integrate it.

My HTML in the index file that loads it is this:

        <input type="file" onchange="previewFile()"><br>
        <img src="" height="32" alt="Upload image here">

My game maker/js code is this:

//Step Event

if(global.src_uri != "empty" and global.my_image == spr_empty){
    var src = global.src_uri;
    var bx = 295 div 2;
    var by = 148 div 2;
    if (os_browser == browser_not_a_browser) {
        // feel free to do whatever else for non-HTML5 fallback
        var b = buffer_base64_decode(string_delete(src, 1, string_pos(",", src)));
        buffer_save(b, "temp.png");
        buffer_delete(b);
        src = "temp.png";
    }
    //visible = true;
    if (AllowDataURI()) {
        //AllowDataURI(sprite_add("", 1, 0, 0, 0, 0));
    }
   
    my_image = sprite_add(src,1, false,false, 0, 0);
    global.my_image = my_image
   
    if(room == rm_options){
        room_goto(rm_choose_meme)
    }
}
   
if(true){
        js_executem("

   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
           window.gml_Script_gmcallback_something(null, null, preview.src);
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           //preview.src = '';
       }
  }

  previewFile();  //calls the function named previewFile()
  ")
   
    if((global.src_uri != "empty") and (room != rm_options and room != rm_choose_template and room != rm_choose_meme)){
        if (scr_check_draw_room() == false){
            visible = false;
        }else{
            visible = true;
        }
        my_image = global.my_image
    }
   
}

Any way I can combine the two to get what I want or is that not something GM: Studio is capable of? When I try to run the code in the link above in js_execute the console sounds like it doesn't understand jQuery. Is there a way I can fix that or is that a lost cause?

 

[YellowAfterlife]

The linked example is pretty large but the idea is there - if you listen to "paste" event on a document, you'll receive a JavaScript event that contains your image along with types-array to indicate that it's an image.

However, your existing code doesn't do the same thing - it attempts to read a file from a file input, but you do not assign previewFile into a window's variable, therefore it is likely invisible to your attribute-bound event handler, and the JavaScript console might even inform you of your mistake.

As your last generous donation had priced my time at $7.5/hour (just about 1/4 of a standard rate for such technical tasks), I let you know in advance that I could write a clean extension for this (and answer your subsequent questions) for about USD 50..70. Or you could do it yourself - a great learning experience. Or maybe you can get your existing code to work, though obviously it is not doing that same thing as what you pointed at as an example of what you intend to accomplish.

 

[Nathan Archer]

The linked example is pretty large but the idea is there - if you listen to "paste" event on a document, you'll receive a JavaScript event that contains your image along with types-array to indicate that it's an image.

However, your existing code doesn't do the same thing - it attempts to read a file from a file input, but you do not assign previewFile into a window's variable, therefore it is likely invisible to your attribute-bound event handler, and the JavaScript console might even inform you of your mistake.

As your last generous donation had priced my time at $7.5/hour (just about 1/4 of a standard rate for such technical tasks), I let you know in advance that I could write a clean extension for this (and answer your subsequent questions) for about USD 50..70. Or you could do it yourself - a great learning experience. Or maybe you can get your existing code to work, though obviously it is not doing that same thing as what you pointed at as an example of what you intend to accomplish.

This is really far beyond anything I'm used to. Do the whole thing for me and I'll happily pay you $50. Cheers.