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 数据表格行内修改的实现代码

    这篇文章主要介绍了bootstrap table 数据表格行内修改的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 微信小程序聊天功能的示例代码

    微信小程序聊天功能的示例代码

    这篇文章主要介绍了微信小程序聊天功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js获取dom元素宽高的几种方法

    js获取dom元素宽高的几种方法

    这篇文章主要给大家介绍了关于js获取dom元素宽高的几种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • 如何使用50行javaScript代码实现简单版的call,apply,bind

    如何使用50行javaScript代码实现简单版的call,apply,bind

    这篇文章主要介绍了50行javaScript代码实现简单版的call,apply,bind过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript之Getters和Setters 平台支持等详细介绍

    JavaScript之Getters和Setters 平台支持等详细介绍

    现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters
    2012-12-12
  • 符合W3C Web标准的图片连续无间隙水平滚动

    符合W3C Web标准的图片连续无间隙水平滚动

    很久以前就有这个问题,总是找不到通用的,或比较简单的“图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准”
    2008-06-06
  • 可选择和输入的下拉列表框示例

    可选择和输入的下拉列表框示例

    如果想实现可选择和输入的下拉列表框,那么下面有个不错的示例,希望大家可以参考下
    2013-11-11
  • uniapp微信小程序获取当前城市名称逆地址解析实例教程

    uniapp微信小程序获取当前城市名称逆地址解析实例教程

    最近在用uni-app开发小程序,需要获取用户所在城市,小程序本身没有这样的api,那么怎么实现呢?下面这篇文章主要给大家介绍了关于uniapp微信小程序获取当前城市名称逆地址解析的相关资料,需要的朋友可以参考下
    2022-11-11
  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    相信大家阅读了Bootstrap第一篇文章后,对Bootstrap充满了探索欲望,小编也对Bootstrap产生了兴趣,所以今天再整理一篇关于Bootstrap的入门介绍,希望大家喜欢。
    2015-11-11
  • JS实现的简单四则运算计算器功能示例

    JS实现的简单四则运算计算器功能示例

    这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,需要的朋友可以参考下
    2017-09-09

最新评论