Jak działa obraz wklejania ze schowka w Gmailu i Google Chrome 12+?

Zauważyłem post na blogu Google, w którym wspomniano o możliwości wklejania obrazów bezpośrednio ze schowka do wiadomości Gmaila, jeśli używasz najnowszej wersji Chrome. Wypróbowałem to z moją wersją Chrome (12.0.742.91 beta-m) i działa świetnie przy użyciu klawiszy sterowania lub menu kontekstowego.

Na podstawie tego zachowania muszę założyć, że najnowsza wersja zestawu webkit używanego w Chrome jest w stanie poradzić sobie z obrazami w zdarzeniu wklejania JavaScript, ale nie mogłem znaleźć żadnych odniesień do takiego ulepszenia. Uważam, że ZeroClipboard wiąże się ze zdarzeniami naciśnięcia klawisza, aby uruchomić swoją funkcję flashowania i jako taki nie działałby w menu kontekstowym (również ZeroClipboard jest cross-browser, a post mówi, że działa tylko z Chrome).

Jak więc to działa i gdzie wprowadzono ulepszenie do Webkita (lub Chrome), które zapewnia tę funkcjonalność?

Spędziłem trochę czasu eksperymentując z tym. Wygląda na to, że jest zgodny ze specyfikacją nowego interfejsu API schowka . Możesz zdefiniować procedurę obsługi zdarzenia „wklej”, spojrzeć na event.clipboardData.items i wywołać na nich getAsFile (), aby uzyskać obiekt Blob. Gdy masz już Bloba , możesz użyć na nim FileReadera , aby zobaczyć, co w nim jest. Oto jak możesz uzyskać adres URL danych dla rzeczy, które właśnie wkleiłeś w Chrome:

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

Gdy masz adres URL danych, możesz wyświetlić obraz na stronie. Jeśli zamiast tego chcesz go przesłać, możesz użyć readAsBinaryString lub umieścić go w XHR za pomocą FormData .

Odpowiedź Nicka wydaje się wymagać drobnych zmian, aby nadal działała :)

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

Przykładowy uruchomiony kod: http://jsfiddle.net/bt7BU/225/

Tak więc zmiana odpowiedzi na nicki brzmiała:

var items = event.clipboardData.items;

do

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

Musiałem również pobrać drugi element z wklejonych elementów (pierwszy wydaje się być tekstem / html, jeśli kopiujesz obraz z innej strony internetowej do bufora). Więc się zmieniłem

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

do pętli znajdującej element zawierający obraz (patrz wyżej)

Nie wiedziałem, jak odpowiedzieć bezpośrednio na odpowiedź Nicka, mam nadzieję, że jest w porządku: $ :)

Oto gładka wtyczka jQuery podsumowująca całą transakcję (w zasadzie te same zasady, co odpowiedź Nicka ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Zawiera demo na żywo, kod źródłowy z adnotacjami i wszystko.

Przeglądarki internetowe idą do przodu. Niedawno znalazłem to:

Fragment kodu - dostęp do obrazów schowka za pomocą JavaScript

i to:

The Paste Wasteland (lub dlaczego wydarzenie onPaste to bałagan)

Pierwszy link opisuje sposób uzyskiwania obrazów ze schowka przy użyciu JavaScript tylko w przeglądarkach Firefox i Chrome. Drugi link zawiera postscriptum, który wspomina o tej samej technice, która została dostosowana do IE (wersja nieznana).

Z tego co wiem -

Dzięki funkcjom HTML 5 (File Api i pokrewne) - dostęp do danych obrazu schowka jest teraz możliwy za pomocą zwykłego javascript.

To jednak nie działa w IE (mniej niż IE 10). Nie wiem też zbyt wiele o obsłudze IE10.

W przypadku IE optiens, które moim zdaniem są opcjami „rezerwowymi”, używają interfejsu Adobe AIR API lub podpisanego apletu

Wow, to super. Nie zagłębiłem się jeszcze w źródło Gmaila, aby to rozgryźć (zrobiłem to z funkcją przeciągania), ale zgaduję, że jest to rozszerzenie interfejsu API przeciągania / upuszczania, które Chrome już rozszerzył. Jest przyzwoity opis działania funkcji przeciągnij na pulpit: http://www.thecssninja.com/javascript/gmail-dragout, który może przynajmniej wskazać Ci właściwy kierunek.

To jest z przykładu z typem angular2, który działa dla mojego projektu. Mam nadzieję, że to komuś pomoże. Logika jest taka sama w innych przypadkach.

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

Oto implementacja na żywo:

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