这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件,需要的朋友可以参考下

见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下。

可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好。

输入框的结构代码:


<input type="text" id="testInput" />

为输入框绑定粘贴事件:


var input = document.getElementById( 'testInput' );

input.addEventListener( 'paste', function( event ){
  // dosomething...
});

粘贴事件的 Event 接口对象提供了一个 clipboardData 接口,该接口就保存了系统剪贴板中的数据,如上面所说,目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。

这里所说的截屏,就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能,或者其他第三方软件提供的截屏功能。


input.addEventListener( 'paste', function( event ){
  // 添加到事件对象中的访问系统剪贴板的接口
  var clipboardData = event.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 );
  }
  }
});

从剪贴板中取到了图片数据,就可以用 FileReader 对其进行读取了。


var imgReader = function( item ){
  var file = item.getAsFile(),
  reader = new FileReader();

  // 读取文件后将其显示在网页中
  reader.onload = function( e ){
  var img = new Image();

  img.src = e.target.result;
  document.body.appendChild( img );
  };

  // 读取文件
  reader.readAsDataURL( file );
};


很短的代码就实现了,可以使用以下源码看看演示。

<!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>

最新资讯
会员“买1得8”?蜻蜓FM遭集体投诉:骗人的

会员“买1得8”?蜻蜓FM

说好的买1个会员送8个其他App会员,买完以后发现并不是
松下回应“员工发‘918勿忘国耻’被警告”:将核查

松下回应“员工发‘91

松下电器(中国)有限公司微博回应称,针对近日松下员工发布
AMD:已获美国许可 向实体清单中某些公司供货

AMD:已获美国许可 向实

9月15日开始,美国的对华为禁令正式升级,台积电、高通、
中国探月工程副总设计师:嫦娥五号年底前发射

中国探月工程副总设计

预计今年底之前发射“嫦娥五号”,实现月球区域软着陆及
报告:全球科研城市北京排名第一 纽约第二

报告:全球科研城市北京

北京在全球科研城市中再次位列第一,第2至5位分别为纽约
量子通信重大进展:北京成功研制首台量子直接通信样机

量子通信重大进展:北京

实现了10公里光纤链路4kb/s通信速率的量子保密电话,推
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,