Como a imagem da funcionalidade colar da área de transferência funciona no Gmail e no Google Chrome 12+?

Percebi uma postagem de blog do Google que menciona a capacidade de colar imagens diretamente da área de transferência em uma mensagem do Gmail se você estiver usando a versão mais recente do Chrome. Eu tentei isso com a minha versão do Chrome (12.0.742.91 beta-m) e funciona muito bem usando as teclas de controle ou o menu de contexto.

Com base nesse comportamento, devo assumir que a versão mais recente do webkit usada no Chrome é capaz de lidar com imagens no evento de colar Javascript, mas não consegui localizar nenhuma referência a esse aprimoramento. Acredito que o ZeroClipboard se liga a eventos de pressionamento de tecla para acionar sua funcionalidade de flash e, como tal, não funcionaria no menu de contexto (também, o ZeroClipboard é cross-browser e a publicação diz que isso funciona apenas com o Chrome).

Então, como isso funciona e onde o aprimoramento foi feito no Webkit (ou Chrome) que habilita a funcionalidade?

Passei algum tempo experimentando isso. Parece seguir a nova especificação da API da área de transferência . Você pode definir um manipulador de eventos "colar" e consultar event.clipboardData.items e chamar getAsFile () para obter um Blob. Depois de ter um Blob, você pode usar o FileReader para ver o que há nele. É assim que você pode obter um URL de dados para as coisas que você acabou de colar no 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);
    }
  }
}

Depois de ter um URL de dados, você pode exibir a imagem na página. Se você quiser fazer o upload, poderá usar readAsBinaryString ou colocá-lo em um XHR usando FormData .

A resposta de Nick parece precisar de pequenas alterações para continuar 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);
  }
}

Exemplo de código em execução: http://jsfiddle.net/bt7BU/225/

Portanto, as mudanças nas respostas de nicks foram:

var items = event.clipboardData.items;

para

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

Também tive que pegar o segundo elemento dos itens colados (o primeiro parece ser text / html se você copiar uma imagem de outra página da web no buffer). Então eu mudei

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

para um loop localizando o item que contém a imagem (veja acima)

Eu não sabia como responder diretamente à resposta de Nick, espero que esteja bem aqui: $ :)

Aqui está um plugin jQuery para encerrar o negócio (basicamente os mesmos princípios da resposta de Nick ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Tem uma demonstração ao vivo, código fonte anotado e tudo mais.

Os navegadores da Web continuam avançando. Eu encontrei recentemente isso:

Snippet de código - Acessando imagens da área de transferência com Javascript

e isto:

Paste Wasteland (ou, por que o evento onPaste está uma bagunça)

O primeiro link descreve uma maneira de obter imagens da área de transferência usando JavaScript apenas no Firefox e Chrome. O segundo link contém um postscript que menciona a mesma técnica foi adaptada ao IE (versão desconhecida).

Até onde sei -

Com os recursos HTML 5 (File Api e os relacionados) - agora é possível acessar dados de imagem da área de transferência com javascript comum.

No entanto, isso não funciona no IE (nada menos que o IE 10). Também não sei muito sobre o suporte ao IE10.

Para o IE, as opções que acredito serem as opções de "fallback" estão usando a API do Adobe AIR ou usando um applet assinado

Uau isso é legal. Ainda não mergulhei na fonte do Gmail para descobrir isso (fiz com a funcionalidade de arrastar), mas acho que é uma extensão da API de arrastar / soltar que o chrome já estendeu. Há uma descrição decente sobre como o recurso de arrastar para a área de trabalho funciona: http://www.thecssninja.com/javascript/gmail-dragout que pode pelo menos apontar você na direção certa.

Isto é de um exemplo com texto datilografado angular2 que funciona para o meu projeto. Espero que ajude alguém. A lógica é a mesma para outros casos também.

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

Aqui está uma implementação ao vivo:

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