如何截图片如何截图片水印( 二 ) _经验知识

};
}

文章插图
sender.addEventListener('paste',function(ev){
// 通过事件对象访问系统剪贴板
varev= ev|| window.event,clipboardData= https://www.soozhuozhou.com/ev.clipboardData,
i= 0,items,item,files;
if(clipboardData){
items= clipboardData.items;
files= clipboardData.files;
if(files&& files.length){
pasteImage(files[0]);
return;
}
if(!items){return;}
for(;i< items.length;i++){
if(items[i].kind=== 'file'&& items[i].type.match(/^image//i)){
item= items[i];
break;
}
}
// 如果存在图片数据
if(item){
pasteImage(item);// 读取该图片
}
}
});
})();
代码很简单，但有些细节需要注意。在MDN的paste事件说明文档中有说明，数据是存放在事件对象的clipboardData属性中的。而在对clipboardData(DataTransfer类型)的说明中，文件类型的数据应该是被存放在files属性中。这一点在使用拖拽上传等情况时确实是这样的，但是在对截图和***的网页图片的处理上，各浏览器的实现似乎出现了差异。
在Chrome浏览器中，从剪贴板读取文件时，files属性中并没有内容，而在items属性中却可以找到。而在Firefox中，files属性中存在图片数据，而在items中却找不到文件类型的数据。因此，我不得不在上示代码中做了存在性判断，增加了额外的逻辑。
此外，IE浏览器对剪贴板的处理比较特殊，它将剪贴板数据放在了window作用域下，通过window.clipboardData对剪贴板数据进行操作。但在IE Edge中测试，并未对截图数据进行成功读取，暂不做描述。
其他
如上代码所示，当clipboardData对象中的files属性中没有数据时，我们可以通过遍历items中的元素，并通过元素的kind和type属性判断元素类型，较后通过getAsFile方法将元素转换为文件类型。
其实除了getAsFile方法，还有一个类似的方法，可以将元素转换成字符串，用法示例如下：
item.getAsString(function(str){
console.log(str);
});
item.getAsString(function(str){
console.log(str);
});
该方法可以根据***源的不同，转换出包含文本格式（比如：字体、字号等）的字符串，如图：
对于文本类型的处理，相信是非常有用的一个方法。
结束语
目前，剪贴板事件还是试验中的功能，在后续的标准文档中可能被修改。我们在实际使用中应该做好兼容处理，附兼容性参考、在线演示。
觉得本文对你有帮助？请分享给更多人
关注「前端大全」，提升前端技能

如何截图片 如何截图片水印( 二 )

如何截图片如何截图片水印( 二 )