Как изображение пасты из функции буфера обмена работает в Gmail и Google Chrome 12+?

Ответ 1

Я провел некоторое время, экспериментируя с этим. Это похоже на новый API-интерфейс буфера обмена. Вы можете определить обработчик события "paste" и посмотреть на event.clipboardData.items и вызвать getAsFile() на них, чтобы получить Blob. Когда у вас есть Blob, вы можете использовать FileReader, чтобы узнать, что в нем. Вот как вы можете получить URL-адрес данных для материала, который вы только что вставили в 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);
    }
  }
}

После того, как у вас есть URL-адрес данных, вы можете отобразить изображение на странице. Если вы хотите загрузить его вместо этого, вы можете использовать readAsBinaryString, или вы можете поместить его в XHR, используя FormData.

Ответ 2

Ответ Nick, по-видимому, нуждается в небольших изменениях в работе:)

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

Пример кода: http://jsfiddle.net/bt7BU/225/

Таким образом, изменения в ответе ников были:

var items = event.clipboardData.items;

to

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

Также мне пришлось взять второй элемент из вставленных элементов (первый, кажется, text/html, если вы копируете изображение с другой веб-страницы в буфер). Поэтому я изменил

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

чтобы найти элемент, содержащий изображение (см. выше)

Я не знал, как ответить прямо на ответ Нику, надеюсь, что здесь хорошо: $:)

Ответ 3

Здесь плавный плагин jQuery, охватывающий всю сделку (в основном те же принципы, что Nick answer): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Он получил живое демо, аннотированный исходный код и все.

Ответ 4

Веб-браузеры идут вперед. Я недавно нашел это:

Фрагмент кода - доступ к изображениям буфера обмена с помощью Javascript

и это:

Пустота Пустоты (или, почему событие onPaste беспорядок)

В первой ссылке описывается способ получения изображений буфера обмена с использованием JavaScript только в Firefox и Chrome. Вторая ссылка содержит постскриптум, который упоминает, что тот же метод был адаптирован к IE (неизвестная версия).

Ответ 5

Насколько я знаю -

Благодаря функциям HTML 5 (File Api и связанным с ними) доступ к данным изображения в буфер обмена теперь возможен с помощью простого javascript.

Однако это не работает на IE (что-то меньшее, чем IE 10). Не слишком много знаю о поддержке IE10.

Для IE optiens, которые, я считаю, являются вариантами "резервного", являются либо с помощью Adobe AIR api или используя подписанный апплет

Ответ 6

Ничего себе, это круто. Я еще не погрузился в источник gmail, чтобы понять его (я сделал это с функцией перетаскивания), но я предполагаю, что это расширение API перетаскивания, которое хром уже расширил. Там есть достойная запись о том, как работает функция drag-to-desktop: http://www.thecssninja.com/javascript/gmail-dragout, которая может по крайней мере указывать на вас в правильном направлении.