3

Eu estava dando uma olhada na funcionalidade do site Imgur. Quando você faz um printscreen ou mesmo copia uma imagem (não o link, mas a imagem, que é uma opção que está disponível na maioria dos navegadores atuais) e, em seguida, cola na página, é feito o upload da imagem que estava salva na área de transferência (clipboard).

Eu não faço a mínima ideia de como o Javascript pode ter acesso à essa parte da memória onde foi salvo o "Copiar".

Eu gostaria de uma demonstração simples de como posso fazer para transferir a imagem da memória e enviar através do upload. E também gostaria de saber se é possível transferir o conteúdo da área de transferência (CTRL+C) para um Blob do Javascript.

0

1 Resposta 1

6

Quando algo é colado em uma página, o js dispara um evento na função onpaste.

Quando colamos uma imagem, o js através da função onpaste nos retorna um objeto com a interface File (Apenas no caso de binários, óbvio). Com esse objeto, nós podemos utilizar o método getAsFile() que utilizaremos com a classe FileReader.

Para ler esse conteúdo, podemos utilizar o método readAsDataURL da classe FileReader. Com isso nós conseguimos capturar o código base64 da imagem, e é basicamente isso que o código do site faz. Ele basicamente envia um base64, ao invés de um arquivo, para o servidor.

Segue um exemplo bem simples.

var reader = new FileReader();

reader.onload = function(result) {
  let img = document.createElement("img");
  img.src = result.target.result;
  document.body.appendChild(img);
}

document.querySelector("input").onpaste = function(event){
  
  let items = event.clipboardData.items;

  for (itemIndex in items) {
      let item = items[itemIndex];

      if (item.kind == 'file') {
        reader.readAsDataURL(item.getAsFile());
      }
  }
}
<input type="text" placeholder="Cole sua imagem aqui" />

Errata: Por que o Javascript precisa de um for pra achar a imagem?

O js precisa desse for porque, quando você copia uma imagem da internet, é lançando uma ação no onpaste com dois DataTransferItem.

O primeiro item é um código html com um elemento <img>. Nesse elemento recebemos um código base64 ou a URL da imagem. Por isso você está recebendo um text/html (Você também pode receber um text/plain).

O segundo, já é uma imagem em si. Podendo ser capturada através do método DataTransferItem.getAsFile()

4
  • Bacana, cara. Simples e direto. +1 Commented 9/01/2018 às 14:10
  • Eu só tenho uma dúvida: Por que o Javascript precisa de um for pra achar a imagem? Estranhamente num código que fiz semelhante ao seu, o valor 0 da iteração sempre traz um item com o valor text/html no type ou vazio, kkkkk... Commented 9/01/2018 às 14:11
  • Quando copia um arquivo da web, ao invés de vir o binário, ele como html. Fiz uma alteração que "burla" isso. Commented 9/01/2018 às 14:51
  • Inconformado com meu código, pesquisei um pouco mais e, fazendo alguns testes adicionais, encontrei uma resposta "descente" para a pergunta acima. Commented 12/01/2018 às 2:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .