¿Cómo funciona la función de pegar imagen del portapapeles en Gmail y Google Chrome 12+?

Noté una publicación de blog de Google que menciona la capacidad de pegar imágenes directamente desde el portapapeles en un mensaje de Gmail si está utilizando la última versión de Chrome. Probé esto con mi versión de Chrome (12.0.742.91 beta-m) y funciona muy bien usando las teclas de control o el menú contextual.

A partir de ese comportamiento, debo suponer que la última versión de webkit utilizada en Chrome puede manejar imágenes en el evento de pegado de Javascript, pero no he podido encontrar ninguna referencia a dicha mejora. Creo que ZeroClipboard se une a eventos de pulsación de teclas para activar su funcionalidad flash y, como tal, no funcionaría a través del menú contextual (también, ZeroClipboard es un navegador cruzado y la publicación dice que esto solo funciona con Chrome).

Entonces, ¿cómo funciona esto y dónde se realizó la mejora de Webkit (o Chrome) que permite la funcionalidad?

Pasé un tiempo experimentando con esto. Parece seguir la nueva especificación API del Portapapeles . Puede definir un controlador de eventos "pegar" y mirar event.clipboardData.items, y llamar a getAsFile () para obtener un Blob. Una vez que tenga un Blob, puede usar FileReader para ver qué contiene . Así es como puede obtener una URL de datos para las cosas que acaba de pegar en Chrome:

// window.addEventListener('paste', ... or
document.onpaste = 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);
    }
  }
}

Una vez que tenga una URL de datos, puede mostrar la imagen en la página. Si desea cargarlo en su lugar, puede usar readAsBinaryString, o puede ponerlo en un XHR usando FormData .

La respuesta de Nick parece necesitar pequeños cambios para seguir funcionando :)

// window.addEventListener('paste', ... or
document.onpaste = function (event) {
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result); // data url!
    };
    reader.readAsDataURL(blob);
  }
}

Código de ejecución de ejemplo: http://jsfiddle.net/bt7BU/225/

Entonces, los cambios en la respuesta de nicks fueron:

var items = event.clipboardData.items;

a

var items = (event.clipboardData  || event.originalEvent.clipboardData).items;

También tuve que tomar el segundo elemento de los elementos pegados (el primero parece ser text / html si copia una imagen de otra página web en el búfer). Entonces cambié

  var blob = items[0].getAsFile();

a un bucle que encuentra el elemento que contiene la imagen (ver arriba)

No sabía cómo responder directamente a la respuesta de Nick, espero que esté bien aquí: $ :)

Aquí hay un plugin jQuery sin problemas que resume todo el asunto (básicamente los mismos principios que la respuesta de Nick ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Tiene una demostración en vivo, código fuente anotado y todo.

Los navegadores web siguen avanzando. Recientemente encontré esto:

Fragmento de código: acceso a imágenes del portapapeles con Javascript

y esto:

The Paste Wasteland (o, por qué el evento onPaste es un desastre)

El primer enlace describe una forma de obtener imágenes del portapapeles usando JavaScript solo en Firefox y Chrome. El segundo enlace contiene una posdata que menciona que la misma técnica fue adaptada a IE (versión desconocida).

Por lo que sé -

Con las funciones de HTML 5 (File Api y las relacionadas), ahora es posible acceder a los datos de la imagen del portapapeles con JavaScript simple.

Sin embargo, esto no funciona en IE (nada menos que IE 10). No sé mucho sobre el soporte de IE10 también.

Para IE, los optiens que creo que son las opciones de 'respaldo' están usando la API de AIR de Adobe o usando un applet firmado

Wow eso es genial. Todavía no me he sumergido en la fuente de Gmail para resolverlo (lo hice con la funcionalidad de arrastrar), pero supongo que es una extensión de la API de arrastrar / soltar que Chrome ya ha extendido. Hay una descripción decente sobre cómo funciona la función de arrastrar al escritorio: http://www.thecssninja.com/javascript/gmail-dragout que al menos puede orientarlo en la dirección correcta.

Esto es de un ejemplo con el mecanografiado angular2 que funciona para mi proyecto. Espero que ayude a alguien. La lógica es igual para otros casos también.

https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7

Aquí hay una implementación en vivo:

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts