Как вы, возможно, знаете, манипулирование буфером обмена в Интернете — задача не из легких, даже для простого текста и тем более для изображений. Содержимое буфера обмена не может быть легко получено с помощью метода, такого как clipboard.getContent, Если вы хотите получить изображения в самых обновленных браузерах (да, извините, но IE8 не поддерживается), вам нужно полагаться на событие вставки окна:
Заметка
Событие может быть инициировано только действием пользователя над документом, а именно нажатием CTRL + V.
window.addEventListener("paste", function(thePasteEvent){
// Use thePasteEvent object here ...
}, false);Когда вы нажимаете CTRL + V и текущее окно находится в фокусе, это событие запускается. Для вас важен thePasteEvent объект (параметр, полученный в качестве аргумента в обратном вызове), который содержит clipboardData объект. Если clipboardData объект существует, то он будет содержать items свойство (по умолчанию не определено, если буфер обмена пуст):
var items = pasteEvent.clipboardData.items;Items — это массив, который содержит данные из буфера обмена, поэтому вам нужно будет только просмотреть его. Если в буфере обмена есть изображение, то содержимое может быть преобразовано в файл (Blob), который имеет структуру, подобную следующей:
{
name: "image.png",
lastModified: 1499172701225,
lastModifiedDate: Tue Jul 04 2017 14:51:41 GMT+0200 (W. Europe Daylight Time),
webkitRelativePath: "",
size: 158453,
type:"image/png",
webkitRelativePath:""
}Этот объект вам нужен для извлечения, если вы хотите отобразить изображение в браузере или отправить его на ваш сервер и т. Д. В методах, которые мы предоставим для простого извлечения изображения из буфера обмена, вам потребуется предоставить thePasteEvent в качестве первого аргумента события, иначе они не будут работать.
В этой статье мы объясним, как работает процесс получения изображения из буфера обмена и как получить изображение в формате Blob или Base64.
Получить изображение как Blob
Самый простой способ извлечь изображение из буфера обмена — это формат Blob (в виде файла). Следующий метод ожидает pasteEvent в качестве первого аргумента и обратный вызов в качестве второго аргумента, который получает в качестве первого и уникального аргумента блоб изображения:
/**
* This handler retrieves the images from the clipboard as a blob and returns it in a callback.
*
* @param pasteEvent
* @param callback
*/
function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
if(pasteEvent.clipboardData == false){
if(typeof(callback) == "function"){
callback(undefined);
}
};
var items = pasteEvent.clipboardData.items;
if(items == undefined){
if(typeof(callback) == "function"){
callback(undefined);
}
};
for (var i = 0; i < items.length; i++) {
// Skip content if not image
if (items[i].type.indexOf("image") == -1) continue;
// Retrieve image on clipboard as blob
var blob = items[i].getAsFile();
if(typeof(callback) == "function"){
callback(blob);
}
}
}Затем его можно использовать следующим образом, например, для отображения BLOB-объекта внутри холста в документе:
window.addEventListener("paste", function(e){
// Handle the event
retrieveImageFromClipboardAsBlob(e, function(imageBlob){
// If there's an image, display it in the canvas
if(imageBlob){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
// Create an image to render the blob on the canvas
var img = new Image();
// Once the image loads, render the img on the canvas
img.onload = function(){
// Update dimensions of the canvas with the dimensions of the image
canvas.width = this.width;
canvas.height = this.height;
// Draw the image
ctx.drawImage(img, 0, 0);
};
// Crossbrowser support for URL
var URLObj = window.URL || window.webkitURL;
// Creates a DOMString containing a URL representing the object given in the parameter
// namely the original Blob
img.src = URLObj.createObjectURL(imageBlob);
}
});
}, false);
В качестве альтернативы вы можете использовать Blob по мере необходимости, это всего лишь пример.
Получить изображение как base64
По умолчанию retrieveImageFromClipboard Метод возвращает Blob (файлоподобный объект неизменяемых, необработанных данных). В качестве обходного пути, если вам нужно получить изображение в формате base64, вы можете использовать следующую функцию (почти такую же, как оригинал), которая создает строку DOM из большого двоичного объекта и устанавливает ее в качестве источника из изображения, которое будет визуализируется на холсте. В качестве последнего шага, когда изображение загружается на абстрактный холст (оно не будет видно), обратный вызов возвращает изображение в формате base64:
/**
* This handler retrieves the images from the clipboard as a base64 string and returns it in a callback.
*
* @param pasteEvent
* @param callback
*/
function retrieveImageFromClipboardAsBase64(pasteEvent, callback, imageFormat){
if(pasteEvent.clipboardData == false){
if(typeof(callback) == "function"){
callback(undefined);
}
};
var items = pasteEvent.clipboardData.items;
if(items == undefined){
if(typeof(callback) == "function"){
callback(undefined);
}
};
for (var i = 0; i < items.length; i++) {
// Skip content if not image
if (items[i].type.indexOf("image") == -1) continue;
// Retrieve image on clipboard as blob
var blob = items[i].getAsFile();
// Create an abstract canvas and get context
var mycanvas = document.createElement("canvas");
var ctx = mycanvas.getContext('2d');
// Create an image
var img = new Image();
// Once the image loads, render the img on the canvas
img.onload = function(){
// Update dimensions of the canvas with the dimensions of the image
mycanvas.width = this.width;
mycanvas.height = this.height;
// Draw the image
ctx.drawImage(img, 0, 0);
// Execute callback with the base64 URI of the image
if(typeof(callback) == "function"){
callback(mycanvas.toDataURL(
(imageFormat || "image/png")
));
}
};
// Crossbrowser support for URL
var URLObj = window.URL || window.webkitURL;
// Creates a DOMString containing a URL representing the object given in the parameter
// namely the original Blob
img.src = URLObj.createObjectURL(blob);
}
}И это можно использовать следующим образом:
window.addEventListener("paste", function(e){
// Handle the event
retrieveImageFromClipboardAsBase64(e, function(imageDataBase64){
// If there's an image, open it in the browser as a new window :)
if(imageDataBase64){
// data:image/png;base64,iVBORw0KGgoAAAAN......
window.open(imageDataBase64);
}
});
}, false);пример
Протестируйте живой пример на следующей скрипке:
