如何使用浏览器中的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 == 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：

<canvas style="border:1px solid grey;" id="mycanvas">

<script>
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);
</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 == 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);

例子

在以下小提琴上测试一个实时示例：

编码愉快！