Wie funktioniert das Einfügen von Bildern aus der Zwischenablage in Google Mail und Google Chrome 12+?

Ich habe einen Blog-Beitrag von Google gesehen , in dem die Möglichkeit erwähnt wird, Bilder direkt aus der Zwischenablage in eine Google Mail-Nachricht einzufügen, wenn Sie die neueste Version von Chrome verwenden. Ich habe dies mit meiner Version von Chrome (12.0.742.91 Beta-M) versucht und es funktioniert hervorragend mit Steuertasten oder dem Kontextmenü.

Aufgrund dieses Verhaltens muss ich davon ausgehen, dass die neueste Version des in Chrome verwendeten Webkits Bilder im Javascript-Einfügeereignis verarbeiten kann, aber ich konnte keine Verweise auf eine solche Verbesserung finden. Ich glaube, ZeroClipboard bindet an Tastendruckereignisse, um seine Flash-Funktionalität auszulösen, und funktioniert daher nicht über das Kontextmenü (außerdem ist ZeroClipboard browserübergreifend und der Beitrag besagt, dass dies nur mit Chrome funktioniert).

Wie funktioniert das und wo wurde das Webkit (oder Chrome) verbessert, das die Funktionalität aktiviert?

Ich habe einige Zeit damit verbracht, damit zu experimentieren. Es scheint der neuen API-Spezifikation für die Zwischenablage zu folgen . Sie können einen Ereignishandler zum Einfügen definieren, event.clipboardData.items anzeigen und getAsFile () aufrufen, um einen Blob abzurufen. Sobald Sie einen Blob haben, können Sie FileReader verwenden , um zu sehen, was darin enthalten ist. So können Sie eine Daten-URL für die Inhalte abrufen, die Sie gerade in Chrome eingefügt haben:

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (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 Sie eine Daten-URL haben, können Sie das Bild auf der Seite anzeigen. Wenn Sie es stattdessen hochladen möchten, können Sie readAsBinaryString verwenden oder es mithilfe von FormData in eine XHR einfügen .

Die Antwort von Nick scheint kleine Änderungen zu benötigen, um noch zu funktionieren :)

// window.addEventListener('paste', ... or
document.onpaste = function (event) {
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result); // data url!
    };
    reader.readAsDataURL(blob);
  }
}

Beispiel für einen laufenden Code: http://jsfiddle.net/bt7BU/225/

Die Änderungen an Nicks Antwort waren also:

var items = event.clipboardData.items;

zu

var items = (event.clipboardData  || event.originalEvent.clipboardData).items;

Außerdem musste ich das zweite Element aus den eingefügten Elementen übernehmen (das erste scheint Text / HTML zu sein, wenn Sie ein Bild von einer anderen Webseite in den Puffer kopieren). Also habe ich mich verändert

  var blob = items[0].getAsFile();

zu einer Schleife, die den Gegenstand findet, der das Bild enthält (siehe oben)

Ich wusste nicht, wie ich direkt auf Nicks Antwort antworten sollte, hoffe es ist in Ordnung hier: $ :)

Hier ist ein reibungsloses jQuery-Plugin, das den gesamten Deal abschließt (im Grunde die gleichen Prinzipien wie Nicks Antwort ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Es gibt eine Live-Demo, kommentierten Quellcode und alles.

Webbrowser marschieren weiter vorwärts. Ich habe kürzlich Folgendes gefunden:

Code-Snippet - Zugriff auf Bilder aus der Zwischenablage mit Javascript

und das:

The Paste Wasteland (oder warum das onPaste-Ereignis ein Chaos ist)

Der erste Link beschreibt eine Möglichkeit, Zwischenablagebilder mit JavaScript nur unter Firefox und Chrome abzurufen. Der zweite Link enthält ein Postskriptum, in dem erwähnt wird, dass dieselbe Technik an den IE angepasst wurde (unbekannte Version).

Soweit ich weiss -

Mit HTML 5-Funktionen (Datei-API und zugehörige Funktionen) ist der Zugriff auf Bilddaten aus der Zwischenablage jetzt mit einfachem Javascript möglich.

Dies funktioniert jedoch nicht im IE (weniger als IE 10). Ich weiß auch nicht viel über die IE10-Unterstützung.

Für IE verwenden die Optionen, von denen ich glaube, dass sie die "Fallback" -Optionen sind, entweder die AIR-API von Adobe oder ein signiertes Applet

Wow, das ist cool. Ich habe noch nicht in die Google Mail-Quelle eingetaucht, um dies herauszufinden (ich habe es mit der Drag-Out-Funktion getan), aber ich vermute, dass es sich um eine Erweiterung der Drag & Drop-API handelt, die Chrome bereits erweitert hat. Es gibt eine anständige Beschreibung der Funktionsweise der Drag-to-Desktop-Funktion: http://www.thecssninja.com/javascript/gmail-dragout , die Sie möglicherweise zumindest in die richtige Richtung weist.

Dies ist aus einem Beispiel mit Angular2-Typoskript, das für mein Projekt funktioniert. Hoffe es hilft jemandem. Die Logik ist auch in anderen Fällen dieselbe.

https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7

Hier ist eine Live-Implementierung:

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts