javascript实现粘贴qq截图功能（clipboardData）
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件。具体代码如下。
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<styletype="text/css">
#box{width:200px;height:200px;border:1pxsolid#ddd;}
</style>
</head>
<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>
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下