para - ¿Cómo puedo permitir que el usuario pegue los datos de imagen del portapapeles en un elemento canvas en Firefox en JavaScript puro?

pushstate w3schools

Question

He hecho todo lo posible para encontrar un ejemplo simple, relevante y actualizado que funcione para la última versión de Firefox y estoy realmente luchando.

Títulos lo dice todo realmente. Quiero que el usuario pueda copiar parte de una imagen de un editor como Windows Paint o usar el botón Imprimir pantalla y luego pegarlo en un elemento canvas. Puntos de bonificación si el lienzo cambia de tamaño para ajustarse exactamente a la imagen pegada (literalmente).

Desea evitar soluciones basadas en Flash o Java si es razonable.

Soy medio decente en Javascript pero relativamente inexperto con las últimas características HTML5 y totalmente nuevo en el elemento Canvas. ¡Por favor ayuda!

Answer 1

Versión 2.0 : un código más pequeño y más limpio funciona en Chrome, Firefox, Edge, Opera. No más hacks. Pero si necesita soporte IE y Safari, verifique la versión v1.

http://jsfiddle.net/KJW4E/905/

La versión 1.0 de la implementación de Chrome es simple. Firefox (e IE) tiene restricciones que el usuario debe dar para pegar como un evento de teclado y la entrada editable debe estar enfocada, por lo que hacemos trucos aquí - en ctrl abajo buscamos ese campo de entrada, en el lanzamiento desenfoque.

Soporte del navegador (datos de imagen):

• Firefox
• Cromo
• Borde
• IE-11
• Ópera

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>