para - javascript paste from clipboard

¿Cómo funciona la imagen pegada desde la funcionalidad del portapapeles en Gmail y Google Chrome 12+?

Question

Observé una publicación de blog de Google que menciona la posibilidad de pegar imágenes directamente desde el portapapeles en un mensaje de Gmail si está utilizando la última versión de Chrome. Intenté 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, tengo que suponer que la última versión de webkit utilizada en Chrome puede tratar las imágenes en el evento de pegar JavaScript, pero no he podido encontrar ninguna referencia a dicha mejora. Creo que ZeroClipboard une a los 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 en Webkit (o Chrome) que habilita la funcionalidad?

Answer 1

Aquí hay un plugin JQuery sin problemas que termina todo el trato (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.

Answer 2

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);
  }
}

Ejemplo de código de ejecución: http://jsfiddle.net/bt7BU/225/

Entonces los cambios a la respuesta de los 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 texto / html si copias una imagen de otra página web en el búfer). Así que cambié

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

a un bucle encontrando 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í: $ :)

Answer 3

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 se adaptó a IE (versión desconocida).

Answer 4

Pasé algún tiempo experimentando con esto. Parece especie de seguir las nuevas especificaciones API de Portapapeles . Puede definir un controlador de eventos "pegar" y mirar event.clipboardData.items, y llamar a getAsFile () sobre ellos para obtener un Blob. Una vez que tenga un Blob, puede usar FileReader para ver lo que FileReader . 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 visualizar la imagen en la página. Si desea cargarlo en su lugar, puede usar readAsBinaryString, o puede ponerlo en un XHR usando FormData .

Answer 5

Por lo que sé -

Con las características 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 (menos de IE 10). No sé mucho sobre el soporte de IE10 también.

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

Answer 6

Wow eso es genial. No me he zambullido 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 un artículo decente sobre cómo funciona la función de arrastrar al escritorio: http://www.thecssninja.com/javascript/gmail-dragout que al menos puede apuntar en la dirección correcta.