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 +‘" />‘;
}
}
}
});
原文：https://www.cnblogs.com/goloving/p/10440404.html