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()