Colando imagens da área de transferência no Gmail: como é feito no Chrome 12

Anúncio do Google sobre a capacidade de colar imagens diretamente da área de transferência em O Gmail usando o Chrome 12 despertou curiosidade sobre o mecanismo subjacente. Apesar de usar a versão mais recente do Chrome, alguns usuários não conseguiram encontrar informações sobre como esse aprimoramento foi implementado no Webkit.

Após experimentação, parece que o Chrome adotou a especificação emergente da API Clipboard. Esta especificação permite a definição de um manipulador de eventos "paste" que pode acessar a propriedade event.clipboardData.items. Chamando getAsFile() em cada item, um objeto Blob pode ser obtido. FileReader pode então ser usado neste Blob para determinar seu conteúdo.

Abaixo está um trecho de código demonstrando como obter um URL de dados para uma imagem colada:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (var 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);
        }
    }
};

Quando um URL de dados estiver disponível, a imagem poderá ser exibida. Como alternativa, ele pode ser carregado usando FormData ou readAsBinaryString.

É importante observar que, embora JSON.stringify possa não funcionar diretamente na lista de itens, os tipos MIME podem ser obtidos iterando cada item usando a estrutura de dados DataTransferItem .