Три способа поддержать вставку картинок в поле ввода от разработчиков Яндекс.Почты

Не так давно мы подробно рассказывали новые аттачи в Яндекс.Почте. В декабре в у нас появился новый просмоторщик картинок. Работать с изображениями в Почте благодаря этим нововведениям стало действительно проще и удобнее.

Тем не менее, оставалась ещё одна сложность: в связи с браузерными ограничениями изображения нельзя было вставлять прямо в тело письма. Картинку нужно было сохранить на своём компьютере и уже оттуда прикрепить к письму, как любой другой файл.

Мы долго думали над этой проблемой. Можно было использовать java-апплет или flash, но у этих решений были существенные ограничения. Например, при использовании java-апплета нужно будет обязательно разрешать выполнение апплета в браузере. В итоге мы решили использовать новые возможности современных браузеров, такие как Clipboard API, File API и Drag n Drop.

Читайте в нашем посте о том, как вставлять в письмо картинки из буфера обмена или по публичному URL и как добавлять их в тело письма простым перетягиванием с рабочего стола.

Вставка картинок из буфера обмена

До недавнего времени полноценная работа с буфером обмена в веб-приложениях казалась невозможной. Но затем появился новый API, специально предназначенный именно для этого (Clipboard API). Он представляет собой интерфейс для работы с данными из буфера обмена при копировании, вырезании и вставке. Интерфейс достаточно универсальный и работает не только с текстовыми данными, но и с файлами в разных форматах. Но, как это обычно бывает, поддерживается он не всеми браузерами и в разном объёме.

Наиболее полная поддержка на сегодняшний день реализована только в WebKit-браузерах (Safari, Chrome, Яндекс.Браузер). В этих браузерах для событий copy, cut и paste в объекте события есть доступ к объекту clipboardData. У clipboardData есть свойства items (элементы в буфере обмена) и types (типы информации в буфере обмена). Получать или менять информацию из буфера можно при помощи методов getData и setData.

В Chrome (c 18 версии) и Яндекс.Браузере есть доступ к картинкам в буфере обмена при вставке. Делается это примерно так:

    // Элемент с contentEditable     var el = document.getElementById('editor');      el.addEventListener('paste', function(e) {         var clipboard = e.clipboardData;          if (clipboard && clipboard.items) {             // В буфере обмена может быть только один элемент             var item = clipboard.items[0];              if (item && item.type.indexOf('image/') > -1) {                 // Получаем картинку в виде блоба                 var blob = item.getAsFile();                  if (blob) {                     // Читаем файл и вставляем его в data:uri                     var reader = new FileReader();                     reader.readAsDataURL(blob);                      reader.onload = function(event) {                         var img = new Image();                         img.src = event.target.result;                          el.appendChild(img);                     }                 }             }         }     }); 

Кроме браузеров на движке WebKit, вставка картинкок из буфера обмена также работает в Firefox: там картинки в designMode сразу вставляются в data:uri.

Вставка картинок по публичному URL

Одно из самых простых и привычных действий — скопировать картинку со страницы в интернете и вставить её в письмо — не поддерживается браузерами по умолчанию. В Safari 5+ в объекте clipboardData нет свойства items, но есть массив types, содержащий типы копируемой иформации. И если копируемая картинка уже есть в интернете по публичному урлу, то её тоже получится вставить. При обычной вставке картинок в designMode Safari создает элемент img с фейковым значением аттрибута src (webkit-fake-url://416873AC…). К этому ресурсу никак нельзя получить доступ из JS, поэтому, чтобы фейковая картинка не вставлялась нужно делать preventDefault у объекта события.

    // Элемент с contentEditable     var el = document.getElementById('editor');      el.addEventListener('paste', function(e) {         var clipboard = e.clipboardData;          if (clipboard && clipboard.types) {             var types = clipboard.types;              if (types.indexOf('public.url') > -1) {                 // Останавливаем действие по умолчанию, чтобы не вставлялась картинка с фейковым урлом (webkit-fake-url://416873AC...)                 e.preventDefault();                  // Вставляем картинку                 var img = new Image();                 img.src = clipboard.getData('public.url');                  el.appendChild(img);             }         }     }); 

Вставка по публичному урлу по умолчанию работает в IE9 и выше.

Вставка перетягиванием

Помимо прямого копирования картинок из буфера обмена или по публичному урлу, в некоторых браузерах есть возможность вставлять картинки драг-н-дропом. Это очень удобно, потому что можно добавить к письму несколько картинок сразу.

    // Элемент с contentEditable     var el = document.getElementById('editor');      el.addEventListener('drop', function(e) {         var dataTransfer = e.dataTransfer;          if (dataTransfer && dataTransfer.files) {             var files = dataTransfer.files;             var len = files.length;              if (len) {                 for (var i = 0; i < len; i++) {                     var file = files[i];                      // Вставляем только картинки                     if (file.type.indexOf('image/') < 0) continue;                      var reader = new FileReader();                     reader.readAsDataURL(file);                      reader.onload = function(event) {                         var img = new Image();                         img.src = event.target.result;                          el.appendChild(img);                     };                 }                  e.preventDefault();             }         }     }); 

Это работает в Firefox, Safari 5.1+, Chrome и Яндекс.Браузере.

В Яндекс.Почте для написания писем с оформлением используется WYSIWYG-редактор TinyMCE. Мы написали для него плагин, объединяющий все решения из этой статьи. Он доступен по адресу github.com/Panya/tinymce_pasteimage.