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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
7个JS基础知识总结
Mar 05 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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(1)
2006/10/09 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
深入探究node之Transform
2017/07/20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python 实现单例模式的5种方法
2020/09/23 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
Java面试题汇总
2015/12/06 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
bose降噪耳机音能消除人声吗
2022/04/19 数码科技