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 学习技巧
Feb 17 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
js实现窗口全屏示例详解
Sep 17 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP7 新增常量
2021/03/09 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python遍历数组的方法小结
2015/04/30 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现词法分析器
2019/01/31 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Python实现壁纸下载与轮换
2020/10/19 Python
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
应聘教师求职信范文
2015/03/20 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle