javascript实现粘贴qq截图功能(clipboardData)


Posted in Javascript onMay 29, 2016

这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图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>

以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
js图片上传的封装代码
2017/08/01 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
厨房工作人员岗位职责
2013/11/15 职场文书
探亲邀请信范文
2014/01/30 职场文书
元宵节主持词
2014/03/25 职场文书
实习协议书范本
2014/04/22 职场文书
医院党员公开承诺书
2014/08/30 职场文书
护理工作个人总结
2015/03/03 职场文书
工商局个人工作总结
2015/03/03 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle