Bagaimana cara tempel gambar dari fungsi clipboard bekerja di Gmail dan Google Chrome 12+?

Saya perhatikan sebuah posting blog dari Google yang menyebutkan kemampuan untuk menempelkan gambar langsung dari clipboard ke dalam pesan Gmail jika Anda menggunakan Chrome versi terbaru. Saya mencoba ini dengan versi Chrome saya (12.0.742.91 beta-m) dan bekerja sangat baik menggunakan tombol kontrol atau menu konteks.

Dari perilaku itu saya perlu berasumsi bahwa versi terbaru dari webkit yang digunakan di Chrome dapat menangani gambar dalam acara tempel Javascript, tetapi saya tidak dapat menemukan referensi apa pun untuk peningkatan semacam itu. Saya percaya ZeroClipboard mengikat acara penekanan tombol untuk memicu fungsionalitas flash-nya dan karena itu tidak akan berfungsi melalui menu konteks (juga, ZeroClipboard adalah cross-browser dan posting mengatakan ini hanya bekerja dengan Chrome).

Jadi, bagaimana cara kerjanya dan di mana perangkat tambahan dibuat untuk Webkit (atau Chrome) yang memungkinkan fungsionalitas?

Saya menghabiskan beberapa waktu untuk bereksperimen dengan ini. Tampaknya semacam mengikuti spesifikasi API Clipboard baru . Anda dapat mendefinisikan event handler "tempel" dan lihat event.clipboardData.items, dan panggil getAsFile () pada mereka untuk mendapatkan Blob. Setelah Anda memiliki Blob, Anda dapat menggunakan FileReader di atasnya untuk melihat apa yang ada di dalamnya. Ini adalah cara Anda mendapatkan url data untuk hal-hal yang baru saja Anda tempel di 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);
    }
  }
}

Setelah Anda memiliki url data, Anda dapat menampilkan gambar di halaman. Jika Anda ingin mengunggahnya, Anda bisa menggunakan readAsBinaryString, atau Anda bisa memasukkannya ke XHR menggunakan FormData .

Jawaban oleh Nick tampaknya perlu perubahan kecil untuk tetap bekerja :)

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

Contoh kode yang berjalan: http://jsfiddle.net/bt7BU/225/

Jadi, perubahan pada torehan jawaban adalah:

var items = event.clipboardData.items;

untuk

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

Juga saya harus mengambil elemen kedua dari item yang ditempelkan (yang pertama tampaknya menjadi teks / html jika Anda menyalin gambar dari halaman web lain ke buffer). Jadi saya berubah

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

ke loop menemukan item yang mengandung gambar (lihat di atas)

Saya tidak tahu bagaimana menjawab langsung jawaban Nick, semoga baik-baik saja di sini: $ :)

Berikut ini adalah plugin jQuery yang halus yang membungkus seluruh kesepakatan (pada dasarnya prinsip yang sama dengan jawaban Nick ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Itu punya demo langsung, kode sumber beranotasi, dan semuanya.

Browser web terus bergerak maju. Saya baru-baru menemukan ini:

Cuplikan Kode - Mengakses Gambar Clipboard dengan Javascript

dan ini:

Paste Wasteland (atau, mengapa acara onPaste berantakan)

Tautan pertama menjelaskan cara mendapatkan gambar papan klip menggunakan JavaScript hanya di Firefox dan Chrome. Tautan kedua berisi postscript yang menyebutkan teknik yang sama diadaptasi ke IE (versi tidak diketahui).

Sejauh yang aku tahu -

Dengan fitur HTML 5 (File Api dan yang terkait) - mengakses data gambar clipboard sekarang dimungkinkan dengan javascript biasa.

Namun ini gagal untuk bekerja pada IE (kurang dari IE 10). Tidak tahu banyak tentang dukungan IE10 juga.

Untuk IE, optiens yang saya percaya adalah opsi 'fallback' baik menggunakan api UDARA Adobe atau menggunakan applet yang ditandatangani

Wow, itu keren. Saya belum masuk ke sumber gmail untuk mengetahuinya (saya lakukan dengan fungsionalitas drag-out), tapi saya menduga itu adalah ekstensi dari API drag / drop yang telah diperluas chrome. Ada artikel yang layak tentang bagaimana fitur drag-to-desktop bekerja: http://www.thecssninja.com/javascript/gmail-dragout yang setidaknya mengarahkan Anda ke arah yang benar.

Ini dari contoh dengan naskah angular2 yang berfungsi untuk proyek saya. Semoga ini bisa membantu seseorang. Logika sama untuk kasus-kasus lain juga.

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

Berikut ini adalah implementasi langsung:

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