ruta - manipular imagenes con javascript

Pegue la imagen del sistema en la página HTML usando javascript

Question

Hola, estoy creando una aplicación de chat web en la que quiero que el usuario pueda copiar, pegar la imagen del escritorio o pegar directamente la captura de pantalla, pero no puedo lograrlo. Utilicé el siguiente código:

$("#dummy").on("paste",function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
var item = items[index];
if (item.kind === ''file'') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)}; // data url!
reader.readAsDataURL(blob);
}
}
})

Utilizando el código anterior en Chrome y Firefox, obtengo Clipboarddata undefined en caso de imagen. Intenté muchos enlaces en google pero no pude alcanzar el objetivo. También probé el siguiente enlace desde stackoverflow: pegue una imagen desde el portapapeles usando JavaScript también el siguiente enlace:

http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

http://codepen.io/netsi1964/pen/IoJbg

¿Puede alguien ayudarme con el ejemplo completo de cómo lograrlo?

Answer 1

Demo

Funciona en el último chrome / firefox. La implementación de Chrome es simple. Firefox tiene restricciones que el usuario debe dar al comando para pegar como evento de teclado y entrada editable debe estar enfocada, por lo que hacemos trucos aquí: en el control hacia abajo enfocamos ese campo de entrada, en desenfoque de liberación.

HTML:

<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>

JS:

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 reading_dom = false;
var text_top = 15;
var pasteCatcher;
var paste_mode;
//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 - prepare
this.init = function () {
//if using auto
if (window.Clipboard)
return true;
pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("id", "paste_ff");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.cssText = ''opacity:0;position:fixed;top:0px;left:0px;'';
pasteCatcher.style.marginLeft = "-20px";
pasteCatcher.style.width = "10px";
document.body.appendChild(pasteCatcher);
document.getElementById(''paste_ff'').addEventListener(''DOMSubtreeModified'', function () {
if (paste_mode == ''auto'' || ctrl_pressed == false)
return true;
//if paste handle failed - capture pasted object manually
if (pasteCatcher.children.length == 1) {
if (pasteCatcher.firstElementChild.src != undefined) {
//image
_self.paste_createImage(pasteCatcher.firstElementChild.src);
}
}
//register cleanup after some time.
setTimeout(function () {
pasteCatcher.innerHTML = '''';
}, 20);
}, false);
}();
//default paste action
this.paste_auto = function (e) {
paste_mode = '''';
pasteCatcher.innerHTML = '''';
var plain_text_used = false;
if (e.clipboardData) {
var items = e.clipboardData.items;
if (items) {
paste_mode = ''auto'';
//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;
}
//c
if (k == 86) {
if (document.activeElement != undefined && document.activeElement.type == ''text'') {
//let user paste into some input
return false;
}
if (ctrl_pressed == true && !window.Clipboard)
pasteCatcher.focus();
}
};
//on kaybord release
this.on_keyboardup_action = function (event) {
k = event.keyCode;
//ctrl
if (k == 17 || event.metaKey || event.ctrlKey || event.key == ''Meta'')
ctrl_pressed = false;
};
//draw image
this.paste_createImage = function (source) {
var pastedImage = new Image();
pastedImage.onload = function () {
if(autoresize == true){
//resize canvas
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;
};
}

Safari no implementa DataTransfer.items, por lo que no hay forma de extraer datos de imagen (es decir, una captura de pantalla copiada en el portapapeles) en Javascript. Puede obtener archivos copiados, pero no datos.

[De la publicación de stakeoverflow]

Answer 2

Cromo

Agregue su código al código de http://codepen.io/netsi1964/pen/IoJbg y http://codepen.io/netsi1964/pen/IoJbg una identificación al div (línea 50)

Incluya su script como se publicó anteriormente con el ID de divs

$("#one").on("paste", function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
var item = items[index];
if (item.kind === ''file'') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result)
}; // data url!
reader.readAsDataURL(blob);
}
}
})

Haga una captura de pantalla, seleccione el primer div (aquel con el ID one ), presione ctrl + v, la captura de pantalla aparece en el div y los datos de imagen se registran en la consola.

Firefox Usa el código que te preparé en este fiddle

<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#one {
border: 1px solid black;
min-height: 100px;
min-width: 100px;
}
</style>
</head>
<body>
Copy image from clipboard in Firefox.
<br /> Select the box below and paste a image from clipboard via ctrl+v
<br /> Data printed at console
<br />
<div id="one" contenteditable="true"></div>
<script>
$(function () {
$("#one").bind("input paste", function (ev) {
window.setTimeout(function (ev) {
var input = $("#one").children()[0].src;
var s = input.split('','');
var mime = s[0];
var data = s[1];
console.log(mime);
console.log(data);
}, 300);
});
});
</script>
</body>
</html>

Chrome y Firefox combinados

Se puede encontrar una versión combinada, que usa el código de @pareshm para Chrome y mi código de Firefox en este jsfiddle.net/SaschaKluth/togafu5s/1 (probado con el contenido del portapapeles creado a través del screendump del sistema por ctrl + imprimir y copiar la parte de la imagen de gimp)