js利用clipboardData实现截屏粘贴功能
本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>copyimg</title>
<styletype="text/css">
#box{width:200px;height:200px;border:1pxsolid#ddd;}
</style>
</head>
<scriptlanguage="JavaScript">
</script>
<body>
<h1>利用clipboardData在网页中实现截屏粘贴的功能</h1>
<hr/>
<div><inputtype="text"id="testInput"placeholder="截屏后粘贴到输入框中"size="30"/></div>
<scripttype="text/javascript">
(function(){
varimgReader=function(item){
varblob=item.getAsFile(),
reader=newFileReader();
reader.onload=function(e){
varimg=newImage();
img.src=e.target.result;
document.body.appendChild(img);
};
reader.readAsDataURL(blob);
};
document.getElementById('testInput').addEventListener('paste',function(e){
varclipboardData=e.clipboardData,
i=0,
items,item,types;
if(clipboardData){
items=clipboardData.items;
if(!items){
return;
}
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);
}
}
});
})();
</script>
</body>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。