脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现粘贴qq截图功能

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 通过webpack引入第三方库的方法

    通过webpack引入第三方库的方法

    这篇文章主要介绍了通过webpack引入第三方库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js 异步处理进度条

    js 异步处理进度条

    js 异步处理进度条的实现代码，需要的朋友可以参考下。
    2010-04-04
  • 不想让浏览器运行javascript脚本的方法

    不想让浏览器运行javascript脚本的方法

    本篇文章给大家介绍不想让浏览器运行javascript脚本的方法，操作方法很简单，只需按照以下几步就可以完成，需要的朋友参考下
    2015-11-11
  • 原生javascript实现解析XML文档与字符串

    原生javascript实现解析XML文档与字符串

    这篇文章主要介绍了javascript解析XML文档和XML字符串的方法和具体的代码解析，有需要的小伙伴可以参考下。
    2016-03-03
  • JavaScript 字符编码规则

    JavaScript 字符编码规则

    通过页面向后台传递中文数据时少不了编/解码。。
    2009-05-05
  • JS实现canvas仿ps橡皮擦刮卡效果详解

    JS实现canvas仿ps橡皮擦刮卡效果详解

    这篇文章主要为大家详细介绍了使用js中的Canvas实现橡皮擦效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 有关js的变量作用域和this指针的讨论

    有关js的变量作用域和this指针的讨论

    在ECMAScript中，只有两种执行环境，全局环境和函数环境，每个函数都是一个执行环境，包括嵌套函数。换句话说，其他情况下即使变量声明在一对大括号中，在括号外部仍然可以访问这些变量
    2010-12-12
  • javascript实现日历效果

    javascript实现日历效果

    这篇文章主要为大家详细介绍了javascript实现日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 关于Error:Unknown option '--inline'报错的解决办法

    关于Error:Unknown option '--inline'报错的解决办法

    这篇文章主要给大家介绍了关于Error:Unknown option '--inline'报错的解决办法,文中将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 前端如何实现动画过渡效果

    前端如何实现动画过渡效果

    这篇文章主要介绍了前端如何实现动画过渡效果，帮助大家更好的理解和学习前端开发网页，感兴趣的朋友可以了解下
    2021-02-02

最新评论