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.