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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

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

и это:

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

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

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

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

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

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