如何使用浏览器中的JavaScript从剪贴板检索图像

本文概述

将图像检索为Blob
检索图像为base64
例子

如你所知, 在网络上操作剪贴板不是一件容易的事, 即使对于纯文本也不是那么简单。剪贴板中的内容无法使用剪贴板.getContent之类的方法轻松检索。如果要在最新的浏览器上检索图像(是的, 很抱歉, 但不支持IE8), 则需要依赖窗口的粘贴事件：
注意该事件只能由用户对文档的操作(即按CTRL + V)触发。

window.addEventListener("paste", function(thePasteEvent){// Use thePasteEvent object here ...}, false);

当你按CTRL + V并且当前窗口处于焦点状态时, 将触发此事件。对于你而言重要的是包含剪贴板数据对象的thePasteEvent对象(在回调中作为参数接收的参数)。如果剪贴板数据对象存在, 则它将包含items属性(如果剪贴板为空, 默认情况下为undefined)：

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作为第一个参数, 并将回调作为第二个参数, 该图像接收图像的Blob作为第一个且唯一的参数：

/** * 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 =http://www.srcmini.com/= 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 imageif (items[i].type.indexOf("image") == -1) continue; // Retrieve image on clipboard as blobvar blob = items[i].getAsFile(); if(typeof(callback) == "function"){callback(blob); }}}

然后可以按以下方式使用它, 例如在文档的画布中显示Blob：

< canvas style="border:1px solid grey; " id="mycanvas"> < script> window.addEventListener("paste", function(e){// Handle the eventretrieveImageFromClipboardAsBlob(e, function(imageBlob){// If there's an image, display it in the canvasif(imageBlob){var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext('2d'); // Create an image to render the blob on the canvasvar img = new Image(); // Once the image loads, render the img on the canvasimg.onload = function(){// Update dimensions of the canvas with the dimensions of the imagecanvas.width = this.width; canvas.height = this.height; // Draw the imagectx.drawImage(img, 0, 0); }; // Crossbrowser support for URLvar URLObj = window.URL || window.webkitURL; // Creates a DOMString containing a URL representing the object given in the parameter// namely the original Blobimg.src = http://www.srcmini.com/URLObj.createObjectURL(imageBlob); }}); }, false); < /script>

另外, 你可以根据需要使用Blob, 这只是一个示例。
检索图像为base64默认情况下, retrieveImageFromClipboard方法返回一个Blob(不可变的原始数据的类似文件的对象)。作为一种变通方法, 如果你需要检索base64格式的图像, 则可以改用以下函数(与原始函数几乎相同), 该函数从blob创建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 =http://www.srcmini.com/= 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 imageif (items[i].type.indexOf("image") == -1) continue; // Retrieve image on clipboard as blobvar blob = items[i].getAsFile(); // Create an abstract canvas and get contextvar mycanvas = document.createElement("canvas"); var ctx = mycanvas.getContext('2d'); // Create an imagevar img = new Image(); // Once the image loads, render the img on the canvasimg.onload = function(){// Update dimensions of the canvas with the dimensions of the imagemycanvas.width = this.width; mycanvas.height = this.height; // Draw the imagectx.drawImage(img, 0, 0); // Execute callback with the base64 URI of the imageif(typeof(callback) == "function"){callback(mycanvas.toDataURL((imageFormat || "image/png"))); }}; // Crossbrowser support for URLvar URLObj = window.URL || window.webkitURL; // Creates a DOMString containing a URL representing the object given in the parameter// namely the original Blobimg.src = http://www.srcmini.com/URLObj.createObjectURL(blob); }}

它可以如下使用：

window.addEventListener("paste", function(e){// Handle the eventretrieveImageFromClipboardAsBase64(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);

例子在以下小提琴上测试一个实时示例：
【如何使用浏览器中的JavaScript从剪贴板检索图像】编码愉快！