利用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