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

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

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

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

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

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

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

в

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

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

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

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

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

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

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

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

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

и это:

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

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

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

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

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

Для IE варианты, которые, как я считаю, являются «запасными», либо используют API-интерфейс Adobe AIR, либо используют подписанный апплет.

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

Это из примера с машинописью angular2, которая работает для моего проекта. Надеюсь, это кому-нибудь поможет. Логика такая же, как и в других случаях.

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

Вот живая реализация:

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