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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php常用的url处理函数总结
2014/11/19 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
js实现计算器功能
2020/08/10 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python实现FLV视频拼接功能
2020/01/21 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
亿企通软件测试面试题
2012/04/10 面试题
UNIX命令速查表
2012/03/10 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
单位在职证明范本
2014/01/09 职场文书
关于建议书的格式范文
2014/05/20 职场文书
市场营销毕业求职信
2014/08/07 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang