html5图片剪切板,javascript在网页中实现读取剪贴板粘贴截图功能

最新推荐文章于 2023-04-03 14:55:34 发布

YozenTung

最新推荐文章于 2023-04-03 14:55:34 发布

阅读量607

点赞数

文章标签： html5图片剪切板

本文介绍了如何通过JavaScript的clipboardData接口，在高版本Chrome浏览器中实现截屏图片直接粘贴到网页的功能。代码示例展示了如何监听输入框的粘贴事件，获取剪贴板中的图片数据，并使用FileReader读取显示在网页上。虽然目前此功能仅限于部分高级浏览器，但这种增强用户体验的方式具有一定的创新性。

摘要由CSDN通过智能技术生成

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

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

输入框的结构代码：

为输入框绑定粘贴事件：

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 );

};

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

利用 clipboardData 在网页中实现截屏粘贴的功能

#box{ width:200px; height:200px; border:1px solid #ddd; }