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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
JQuery学习总结【二】
Dec 01 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
layui select动态添加option的实例
Mar 07 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
程序员编程十条戒律
2009/07/09 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
javascript 禁止复制网页
2009/06/11 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
浅谈django model postgres的json字段编码问题
2018/01/05 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
python实现网页自动签到功能
2019/01/21 Python
pandas的qcut()方法详解
2019/07/06 Python
学Python 3的理由和必要性
2019/11/19 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
颁奖典礼主持词
2014/03/25 职场文书
语文教研活动总结
2014/07/02 职场文书
不错的求职信范文
2014/07/20 职场文书
授权委托书格式
2014/07/31 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
营业用房租赁协议书
2014/11/26 职场文书
小人国观后感
2015/06/11 职场文书