Comment Chrome 12 permet-il le collage direct d'images dans Gmail ?

Déverrouillage de l'intégration du presse-papiers d'images dans Gmail et Chrome 12

Dans une avancée remarquable, Chrome 12 et versions ultérieures offrent aux utilisateurs la possibilité de coller de manière transparente des images directement à partir du presse-papiers. dans les messages Gmail. Cette fonctionnalité innovante va au-delà des limites des solutions existantes, qui reposent sur des événements de frappe et ne prennent pas en charge l'accès au menu contextuel.

Pour y parvenir, Webkit a introduit une amélioration sophistiquée sous le capot. En étendant l'API Clipboard, il prend en charge l'événement onpaste, où les développeurs peuvent accéder au contenu du presse-papiers. Lors du collage, un tableau d'objets ClipboardItem est exposé, chacun contenant l'élément spécifique qui a été collé.

Pour approfondir les détails de cette fonctionnalité, les développeurs peuvent se référer à l'extrait de code suivant :

<code class="javascript">document.onpaste = function(event) {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // Mime type information (optional)

  for (let item of items) {
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event) {
        console.log(event.target.result); // Data URL for the pasted image!
      }
      reader.readAsDataURL(blob);
    }
  }
};</code>

Une fois obtenue, une URL de données représente l'image collée, qui peut être affichée ou téléchargée selon les besoins. L'API FileReader peut être exploitée pour extraire une URL de données ou des données binaires de l'image. FormData fournit une méthode pratique pour télécharger des images à l'aide de XHR.

Cet ajout révolutionnaire aux fonctionnalités de Webkit étend les possibilités de partage et de manipulation transparentes d'images dans Gmail et sur le Web au sens large.

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!