利用blob对象实现粘贴图片

　　blob的一个常用应用场景，就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后，需要在网页上进行粘贴操作。

　　粘贴图片我们需要解决下面几个问题

　　1、监听用户的粘贴操作

　　2、获取到剪切板上的数据

　　3、将获取到的数据渲染到网页中

　　首先我们可以通过paste事件来监听用户的粘贴操作:

document.addEventListener('paste', function (e) {
    console.info(e);
});

　　然后，可以通过事件对象中的clipboardData 对象来获取图片的文件数据。

clipboardData对象介绍

　　介绍一下 clipboardData 对象，它实际上是一个 DataTransfer 类型的对象， DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。

items 介绍

　　items 是一个 DataTransferItemList 对象，自然里面都是 DataTransferItem 类型的数据了。

types介绍

　　一般 types 中常见的值有 text/plain 、 text/html 、 Files 。

　　有了上面这些方法，我们可以解决第二个问题即获取到剪切板上的数据。

document.addEventListener('paste', function (e) {
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
    }
    var cbd = e.clipboardData;
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        console.info(item);
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            console.info(blob);
        }
    }
});

　　最后，我们需要将获取到的数据渲染到网页上。其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接将获取到的文件上传到服务器，然后通过服务器返回的url地址来对图片进行渲染；也可以使用fileRender对象来进行图片本地浏览。

fileRender对象简介

　　从Blob中读取内容的唯一方法是使用 FileReader。FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

　　FileReader对象以前介绍过，不多说。通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。

document.addEventListener('paste', function (e) {
    var cbd = e.clipboardData;
        var fr = new FileReader();
        for(var i = 0; i < cbd.items.length; i++) {
            var item = cbd.items[i];
            if(item.kind == "file"){
                var blob = item.getAsFile();
                if (blob.size === 0) {
                    return;
                }
                fr.readAsDataURL(blob);
                fr.onload=function(e){
                    var result=document.getElementById("result");
                    //显示文件
                    result.innerHTML='<img src="' + this.result +'" alt="" />';
                }
            }
        }
});

 

转载于:https://www.cnblogs.com/goloving/p/10440404.html