js剪切板应用clipboardData实例解析
目前仅有高版本的Chrome浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的，只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据，它是自带的直接进去img数据。
完整实例：
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<styletype="text/css">
.box{width:500px;height:300px;border:1pxsolid#ddd;}
.boximg{max-width:480px;max-height:100%;text-align:center;}
</style>
</head>
<body>
<divclass="box"contenteditable="true"id="testInput">
</div>
<scripttype="text/javascript">
(function(){
varimgReader=function(item){
varblob=item.getAsFile(),
reader=newFileReader();
reader.onload=function(e){
varimg=newImage();
img.src=e.target.result;
console.log(img);
document.getElementById('testInput').appendChild(img);
};
reader.readAsDataURL(blob);
};
document.getElementById('testInput').addEventListener('paste',function(e){
//window.clipboardData.getData("Text")ie下获取黏贴的内容e.clipboardData.getData("text/plain")火狐谷歌下获取黏贴的内容
//alert(e.clipboardData.getData("text/plain"))
varclipboardData=e.clipboardData,//谷歌
i=0,
items,item,types;
console.log('0')
if(clipboardData){
console.log('1')
items=clipboardData.items;
if(!items){
console.log(2)
return;
}
console.log(3)
item=items[0];
types=clipboardData.types||[];
for(;i<types.length;i++){
if(types[i]==='Files'){
item=items[i];
break;
}
}
if(item&&item.kind==='file'&&item.type.match(/^image\//i)){
imgReader(item);
}
}
},false);
})();
</script>
</script>
</body>
</html>
实例二：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divid="div"style="width:100%;height:700px;border:1pxsolid#ccc;padding:20px"contenteditable="true"></div>
<script>
vardiv=document.getElementById('div');
div.addEventListener('paste',function(e){
if(e.clipboardData){
for(vari=0;i<e.clipboardData.items.length;i++){
varc=e.clipboardData.items[i];
varf=c.getAsFile();
varreader=newFileReader();
reader.onload=function(e){
div.innerHTML+='<imgsrc="'+e.target.result+'">';
}
reader.readAsDataURL(f);
}
}
});
</script>
</body>
</html>
实现的方法：
方法一：在Chrome浏览器中能够直接通过clipboardData获取截图的图片数据，可以用ajax将数据传给后台，然后由后台开发返回带域名的图片地址
方法二：由于在火狐等浏览器中无法直接获取图片数据，所以可以在粘贴的时候获取div中的img的数据是base64的url数据，然后同方法一用ajax
方法三：可以统一在点击发布或者保存消息时，获取div中的img的数据是base64的url数据，然后同方法一用ajax，如果有多张就循环，也或者是直接点击保存和发布的时候，后端开发做处理，返回来的显示信息中直接做处理，这样我们在div中就不需要把base64的url替换成后端返回的带域名的地址
方法四：在div中粘贴的时候弹出一个弹出层，然后弹出层中有截图的图片预览可确认上传按钮，点击上传按钮走ajax上传图片同方法一