这篇文章主要介绍了 javascript 实现粘贴 qq 截图功能,利用 clipboardData 在网页中实现截屏粘贴的功能,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能, 即可以把剪贴板的截图 Ctrl+V 粘贴到网页的一个输入框中, 例如 QQ 截图、旺旺截图或者其它截图软件。具体代码如下。
- <!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>
来源: http://www.phperz.com/article/17/0226/265352.html