Coller des images du presse-papiers dans Gmail : comment procéder dans Chrome 12

Annonce de Google concernant la possibilité de coller des images directement du presse-papiers dans Gmail utilisant Chrome 12 a suscité la curiosité quant au mécanisme sous-jacent. Malgré l'utilisation de la dernière version de Chrome, certains utilisateurs n'ont pas pu trouver d'informations sur la manière dont cette amélioration a été implémentée dans Webkit.

Après expérimentation, il semble que Chrome ait adopté la spécification émergente de l'API Clipboard. Cette spécification permet la définition d'un gestionnaire d'événements "coller" pouvant accéder à la propriété event.clipboardData.items. En appelant getAsFile() sur chaque élément, un objet Blob peut être obtenu. FileReader peut ensuite être utilisé sur ce Blob pour déterminer son contenu.

Vous trouverez ci-dessous un extrait de code montrant comment obtenir une URL de données pour une image collée :

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

Une fois qu'une URL de données est disponible, l'image peut être affichée. Alternativement, il peut être téléchargé à l'aide de FormData ou readAsBinaryString.

Il est important de noter que même si JSON.stringify peut ne pas fonctionner directement sur la liste d'éléments, les types MIME peuvent être obtenus en parcourant chaque élément à l'aide de la structure de données DataTransferItem. .