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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue配置多页面的实现方法
May 22 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JS实现页面鼠标点击出现图片特效
Aug 19 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
师范大学应届生求职信
2013/11/21 职场文书
升职自荐书范文
2013/11/28 职场文书
食堂员工工作职责
2013/12/18 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
办公室管理规章制度
2015/08/04 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Go 语言结构实例分析
2021/07/04 Golang
Python基础 括号()[]{}的详解
2021/11/07 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers