Bilder aus der Zwischenablage in Gmail einfügen: So geht's in Chrome 12

Googles Ankündigung der Möglichkeit, Bilder direkt aus der Zwischenablage in einzufügen Gmail mit Chrome 12 hat Neugier auf den zugrunde liegenden Mechanismus geweckt. Obwohl sie die neueste Chrome-Version verwenden, konnten einige Benutzer keine Informationen darüber finden, wie diese Verbesserung in Webkit implementiert wurde.

Bei Experimenten scheint es, dass Chrome die neue Clipboard-API-Spezifikation übernommen hat. Diese Spezifikation ermöglicht die Definition eines „Paste“-Ereignishandlers, der auf die Eigenschaft event.clipboardData.items zugreifen kann. Durch den Aufruf von getAsFile() für jedes Element kann ein Blob-Objekt abgerufen werden. FileReader kann dann für diesen Blob verwendet werden, um seinen Inhalt zu bestimmen.

Unten ist ein Codeausschnitt, der zeigt, wie man eine Daten-URL für ein eingefügtes Bild erhält:

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

Sobald eine Daten-URL verfügbar ist, kann das Bild angezeigt werden. Alternativ kann es mit FormData oder readAsBinaryString hochgeladen werden.

Es ist wichtig zu beachten, dass JSON.stringify zwar möglicherweise nicht direkt auf die Elementliste funktioniert, MIME-Typen jedoch durch Iteration durch jedes Element mithilfe der DataTransferItem-Datenstruktur erhalten werden können .