Pegar imágenes desde el portapapeles en Gmail: cómo se hace en Chrome 12

Anuncio de Google sobre la posibilidad de pegar imágenes directamente desde el portapapeles en Gmail usando Chrome 12 ha despertado curiosidad sobre el mecanismo subyacente. A pesar de usar la última versión de Chrome, algunos usuarios no han podido encontrar información sobre cómo se implementó esta mejora en Webkit.

Tras experimentar, parece que Chrome ha adoptado la especificación emergente API del Portapapeles. Esta especificación permite la definición de un controlador de eventos "pegar" que puede acceder a la propiedad event.clipboardData.items. Al llamar a getAsFile() en cada elemento, se puede obtener un objeto Blob. Luego se puede usar FileReader en este Blob para determinar su contenido.

A continuación se muestra un fragmento de código que demuestra cómo obtener una URL de datos para una imagen pegada:

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

Una vez que una URL de datos esté disponible, se podrá mostrar la imagen. Alternativamente, se puede cargar usando FormData o readAsBinaryString.

Es importante tener en cuenta que, si bien es posible que JSON.stringify no funcione directamente en la lista de elementos, los tipos MIME se pueden obtener iterando a través de cada elemento usando la estructura de datos DataTransferItem. .