Maison > interface Web > js tutoriel > Comment Gmail et Chrome 12 permettent-ils le collage direct d'images à partir du Presse-papiers ?

Comment Gmail et Chrome 12 permettent-ils le collage direct d'images à partir du Presse-papiers ?

Mary-Kate Olsen
Libérer: 2024-10-28 08:38:02
original
753 Les gens l'ont consulté

How does Gmail and Chrome 12  Enable Direct Image Pasting from the Clipboard?

Amélioration de la fonctionnalité du Presse-papiers : comment Gmail et Chrome libèrent le collage d'images

Le billet de blog de Google a dévoilé une fonctionnalité révolutionnaire dans Gmail : la possibilité de coller des images directement à partir du presse-papiers à l'aide de Chromé 12 . Cela a suscité la curiosité des développeurs, désireux de comprendre comment cette fonctionnalité a vu le jour.

La clé de cette amélioration réside dans la dernière version de WebKit, le moteur derrière Chrome. Il a introduit la possibilité de gérer des images dans l'événement de collage JavaScript. Cet écart par rapport au comportement précédent ouvre de nouvelles possibilités pour la gestion du presse-papiers.

Pour décoder cette nouvelle fonctionnalité, il faut se plonger dans la spécification de l'API Clipboard. En enregistrant un gestionnaire d'événements « coller » et en inspectant event.clipboardData.items, un développeur peut récupérer une liste d'éléments. Ces éléments sont du type DataTransferItem, donnant accès aux types MIME.

En tirant parti de cette API, Gmail (une application Web basée sur Chrome) a exploité les nouvelles capacités de gestion des images. Lorsqu'une image est collée depuis le presse-papiers, le moteur WebKit de Chrome la convertit en URL de données pour une insertion transparente dans le message Gmail.

Voici un exemple de code pratique qui montre comment une page Web peut récupérer des URL de données à partir d'images collées. en utilisant l'API Clipboard :

<code class="javascript">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);
        }
    }
};</code>
Copier après la connexion

Les développeurs cherchant à étendre cette fonctionnalité à d'autres navigateurs peuvent être confrontés à des défis car la spécification est encore en cours de développement. Cependant, en surveillant attentivement les progrès de l'API Clipboard, ils peuvent garder une longueur d'avance et améliorer leurs applications en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal