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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
js面向对象的写法
Feb 19 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Angular8路由守卫原理和使用方法
Aug 29 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 文章调用类代码
2011/08/11 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python安装twisted的问题解析
2018/08/21 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
django框架中间件原理与用法详解
2019/12/10 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python生成任意频率正弦波方式
2020/02/25 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
EJB实例的生命周期
2016/10/28 面试题
产品销售计划书
2014/05/04 职场文书
武当山导游词
2015/02/03 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android