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>