How can I let user paste image data from the clipboard into a canvas element in Firefox in pure Javascript?

Question

I have done my best to find a simple, relevant, and up-to-date example that works for the latest version of Firefox and I'm really struggling.

Titles says it all really. I want the user to able to copy part of an image from an editor such as Windows Paint or use the Print Screen button and then paste that into a canvas element. Bonus points if the canvas resizes to fit exactly the pasted image (literally).

Want to avoid Flash or Java based solutions if reasonable.

I'm half-decent at Javascript but relatively inexperienced with the latest HTML5 features and totally new to the Canvas element. Please help!

Answer 1

Version 2.0: Smaller, cleaner code works on Chrome, Firefox, Edge, Opera. No more hacks. But if you need support IE and Safari, check v1 version.

http://jsfiddle.net/viliusl/xq2aLj4b/5/

---

Version 1.0 Chrome implementation is simple. Firefox (and IE) has restrictions that user must give command to do paste like keyboard event and editable input must be focused, so we do tricks here - on ctrl down we focusthat input field, on release unfocus.

Browser support (image data):

• Firefox
• Chrome
• Edge
• IE-11
• Opera

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param {string} canvas_id - canvas id
 * @param {boolean} autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
 var _self = this;
 var canvas = document.getElementById(canvas_id);
 var ctx = document.getElementById(canvas_id).getContext("2d");
 var ctrl_pressed = false;
 var command_pressed = false;
 var paste_event_support;
 var pasteCatcher;

 //handlers
 document.addEventListener('keydown', function (e) {
  _self.on_keyboard_action(e);
 }, false); //firefox fix
 document.addEventListener('keyup', function (e) {
  _self.on_keyboardup_action(e);
 }, false); //firefox fix
 document.addEventListener('paste', function (e) {
  _self.paste_auto(e);
 }, false); //official paste handler

 //constructor - we ignore security checks here
 this.init = function () {
  pasteCatcher = document.createElement("div");
  pasteCatcher.setAttribute("id", "paste_ff");
  pasteCatcher.setAttribute("contenteditable", "");
  pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
  document.body.appendChild(pasteCatcher);

  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
   mutations.forEach(function(mutation) {
    if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){
     //we already got data in paste_auto()
     return true;
    }

    //if paste handle failed - capture pasted object manually
    if(mutation.addedNodes.length == 1) {
     if (mutation.addedNodes[0].src != undefined) {
      //image
      _self.paste_createImage(mutation.addedNodes[0].src);
     }
     //register cleanup after some time.
     setTimeout(function () {
      pasteCatcher.innerHTML = '';
     }, 20);
    }
   });
  });
  var target = document.getElementById('paste_ff');
  var config = { attributes: true, childList: true, characterData: true };
  observer.observe(target, config);
 }();
 //default paste action
 this.paste_auto = function (e) {
  paste_event_support = false;
  if(pasteCatcher != undefined){
   pasteCatcher.innerHTML = '';
  }
  if (e.clipboardData) {
   var items = e.clipboardData.items;
   if (items) {
    paste_event_support = true;
    //access data directly
    for (var i = 0; i < items.length; i++) {
     if (items[i].type.indexOf("image") !== -1) {
      //image
      var blob = items[i].getAsFile();
      var URLObj = window.URL || window.webkitURL;
      var source = URLObj.createObjectURL(blob);
      this.paste_createImage(source);
     }
    }
    e.preventDefault();
   }
   else {
    //wait for DOMSubtreeModified event
    //https://bugzilla.mozilla.org/show_bug.cgi?id=891247
   }
  }
 };
 //on keyboard press
 this.on_keyboard_action = function (event) {
  k = event.keyCode;
  //ctrl
  if (k == 17 || event.metaKey || event.ctrlKey) {
   if (ctrl_pressed == false)
    ctrl_pressed = true;
  }
  //v
  if (k == 86) {
   if (document.activeElement != undefined && document.activeElement.type == 'text') {
    //let user paste into some input
    return false;
   }

   if (ctrl_pressed == true && pasteCatcher != undefined){
    pasteCatcher.focus();
   }
  }
 };
 //on kaybord release
 this.on_keyboardup_action = function (event) {
  //ctrl
  if (event.ctrlKey == false && ctrl_pressed == true) {
   ctrl_pressed = false;
  }
  //command
  else if(event.metaKey == false && command_pressed == true){
   command_pressed = false;
   ctrl_pressed = false;
  }
 };
 //draw pasted image to canvas
 this.paste_createImage = function (source) {
  var pastedImage = new Image();
  pastedImage.onload = function () {
   if(autoresize == true){
    //resize
    canvas.width = pastedImage.width;
    canvas.height = pastedImage.height;
   }
   else{
    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
   }
   ctx.drawImage(pastedImage, 0, 0);
  };
  pastedImage.src = source;
 };
}

1. Copy image data into clipboard or press Print Screen <br>
2. Press Ctrl+V (page/iframe must be focused):
<br /><br />
<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

Answer 2

ViliusL's answer is great, but for those looking for a simple cross-browser way to capture a pasted image:

window.addEventListener("paste", async function(e) {
  e.preventDefault();
  e.stopPropagation();
  let file = e.clipboardData.items[0].getAsFile();
  let objectUrl = URL.createObjectURL(file);
  // do something with url here
});

You'll probably want to do some error checking (like in ViliusL's answer), in case they paste something that's not an image. According to MDN, clipboardData works in all modern browsers. I've tested on Chrome and Firefox, and they work fine.

Answer 3

Here's a solution for modern browsers:

document.addEventListener('paste', async (ev: ClipboardEvent) => {
    if(!ev.clipboardData?.items?.length) return
    const {items} = ev.clipboardData
    for(const item of items) {
        if(!item.type.startsWith('image/')) continue
        const file = item.getAsFile()!
        const bitmap = await createImageBitmap(file)

        // ...

        context2d.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
    }
})

No need for object URLs. You can convert the clipboard image directly to a ImageBitmap and then draw it with drawImage.