javascript实现粘贴qq截图功能（clipboardData）

更新时间：2016年05月29日 11:43:00 作者：silenceboy

这篇文章主要介绍了javascript实现粘贴qq截图功能，利用clipboardData在网页中实现截屏粘贴的功能，感兴趣的小伙伴们可以参考一下

这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图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程序设计有所帮助。

您可能感兴趣的文章:

bootstrap table 数据表格行内修改的实现代码
这篇文章主要介绍了bootstrap table 数据表格行内修改的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
微信小程序聊天功能的示例代码
这篇文章主要介绍了微信小程序聊天功能的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
js获取dom元素宽高的几种方法
这篇文章主要给大家介绍了关于js获取dom元素宽高的几种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
2023-08-08
如何使用50行javaScript代码实现简单版的call,apply,bind
这篇文章主要介绍了50行javaScript代码实现简单版的call,apply,bind过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
JavaScript之Getters和Setters 平台支持等详细介绍
现在，JavaScript的Getters和Setters使用非常广泛，它和每个JavaScript开发者的切身利益息息相关,我们先来快速了解什么是Getters和Setters，以及它们为什么很有用.然后，我们来看看现在都有哪些平台支持Gettets和Setters
2012-12-12
符合W3C Web标准的图片连续无间隙水平滚动
很久以前就有这个问题，总是找不到通用的，或比较简单的“图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准”
2008-06-06
可选择和输入的下拉列表框示例
如果想实现可选择和输入的下拉列表框，那么下面有个不错的示例，希望大家可以参考下
2013-11-11
uniapp微信小程序获取当前城市名称逆地址解析实例教程
最近在用uni-app开发小程序,需要获取用户所在城市,小程序本身没有这样的api,那么怎么实现呢?下面这篇文章主要给大家介绍了关于uniapp微信小程序获取当前城市名称逆地址解析的相关资料,需要的朋友可以参考下
2022-11-11
Bootstrap每天必学之简单入门
相信大家阅读了Bootstrap第一篇文章后，对Bootstrap充满了探索欲望，小编也对Bootstrap产生了兴趣，所以今天再整理一篇关于Bootstrap的入门介绍，希望大家喜欢。
2015-11-11
JS实现的简单四则运算计算器功能示例
这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,需要的朋友可以参考下
2017-09-09