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

Я заметил сообщение в блоге от Google это упоминает возможность вставлять изображения непосредственно из буфера обмена в сообщение Gmail, если вы используете последнюю версию Chrome. Я попробовал это с моей версией Chrome (12.0.742.91 beta-m), и он отлично работает с помощью клавиш управления или контекстного меню.

из этого поведения мне нужно предположить, что последняя версия webkit, используемая в Chrome, может иметь дело с изображениями в событии вставки Javascript, но я был не удалось найти никаких ссылок на такое улучшение. Я верю ZeroClipboard привязывается к событиям нажатия клавиш, чтобы вызвать его функциональность flash, и как таковая не будет работать через контекстное меню (кроме того, ZeroClipboard является кросс-браузером, и сообщение говорит, что это работает только с Chrome).

Итак, как это работает и где было сделано улучшение для Webkit (или Chrome), которое позволяет функциональность?

122
google-chrome html5 javascript webkit

6 ответов

Я провел некоторое время, экспериментируя с этим. Кажется, он вроде как следует за новым спецификация API буфера обмена. Вы можете определить обработчик событий "вставить" и посмотреть на событие.clipboardData.элементы и вызов 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.

187

ответ Ника, похоже, нуждается в небольших изменениях, чтобы все еще работать:)

// 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/

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

var items = event.clipboardData.items;

до 

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

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

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

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

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

40

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

У него есть живая демонстрация, аннотированный исходный код и все такое.

24

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

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

и так:

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

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

6

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

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

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

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

2

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

1