其他分享
首页 > 其他分享> > 利用blob对象实现粘贴图片

利用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="" />';
                }
            }
        }
});

 

标签:items,item,blob,clipboardData,var,粘贴,图片
来源: https://www.cnblogs.com/goloving/p/10440404.html