javascript在网页中实现读取剪贴板粘贴截图功能
见某网站的输入框支持截屏粘贴的功能，觉得有点意思，于是将代码扒出来分享下。
可惜，目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴( IE11没测试过 )，当然这种增强型的用户体验功能有总比没有好。
输入框的结构代码：
<input type="text" id="testInput" />
为输入框绑定粘贴事件：
var input = document.getElementById( 'testInput' );
input.addEventListener( 'paste', function( event ){
// dosomething...
});
粘贴事件的 Event 接口对象提供了一个 clipboardData 接口，该接口就保存了系统剪贴板中的数据，如上面所说，目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。
这里所说的截屏，就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能，或者其他第三方软件提供的截屏功能。
input.addEventListener( 'paste', function( event ){
// 添加到事件对象中的访问系统剪贴板的接口
var clipboardData = event.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 );
}
}
});
从剪贴板中取到了图片数据，就可以用 FileReader 对其进行读取了。
var imgReader = function( item ){
var file = item.getAsFile(),
reader = new FileReader();
// 读取文件后将其显示在网页中
reader.onload = function( e ){
var img = new Image();
img.src = e.target.result;
document.body.appendChild( img );
};
// 读取文件
reader.readAsDataURL( file );
};
很短的代码就实现了，可以使用以下源码看看演示。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>
<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>
<hr />
<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div>
<script type="text/javascript">
(function(){
var imgReader = function( item ){
var blob = item.getAsFile(),
reader = new FileReader();
reader.onload = function( e ){
var img = new Image();
img.src = e.target.result;
document.body.appendChild( img );
};
reader.readAsDataURL( blob );
};
document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
var clipboardData = 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>
相关文章
![无阻塞加载脚本分析[全]](//img.jbzj.com/images/xgimg/bcimg0.png)
script标签的阻塞行为会对页面性能产生负面影响，大多数浏览器在下载或执行脚本的同时，会阻塞下载位于它之后的资源，也会阻塞渲染位于它之后的元素。2011-01-01
VsCode插件自动生成注释插件koroFileHeader使用教程
这篇文章主要介绍了VsCode插件自动生成注释插件koroFileHeader使用教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
如果有一定的JavaScript基础，制作浮动广告还是比较容易的,利用闲暇时间简单制作了一个，感兴趣的朋友可以参考下哦2012-12-12
这篇文章主要给大家介绍了关于利用JavaScript实现的九种排序算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下2017-05-05
下面小编就为大家带来一篇去除html代码里面的script正则方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
returnValue是javascript中html的window对象的属性,目的是返回窗口值，下面有个示例，大家可以感受下2014-07-07
这篇文章主要介绍了原生js代码能实现call和bind吗,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
通常我们判断js图片大小都是利用images对象，然后再用attr来获取图片地址再进行判断就可以了。这篇文章主要介绍了Javascript判断图片尺寸大小的实例,需要的朋友可以参考下2014-06-06
![无阻塞加载脚本分析[全]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论