Вставка изображения из буфера с помощью javascript

Все те, кто постоянно пользуется компьютером, ежедневно используют системный буфер обмена. В основном, конечно, для копирования и вставки текста. Но не стоит забывать и о возможности сохранения изображений в буфере. Я хочу рассказать, как при помощи javascript можно получить изображение из буфера к себе на сайт или приложение. В настоящее время это работает только в Chrome и Firefox.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.display = "none";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}

В Chrome мы получаем доступ к изображению с помощью clipboardData (это возможно только в обработчике события paste). Внутри обработчика проходим по всему содержимому буфера и получаем изображение. Затем создаем его blob образ и используем его урл для изображения, добавляемого на страницу.
Firefox не иммеет объекта clipboardData и для вставки изображения используем то, что в нем можно вставлять изображение в элемент с атрибутом contenteditable. Хак SetTimeout (checkInput, 1) используется для того, чтобы получить изображение после его вставки.

Здесь можно посмотреть, как работает данный скрипт.