提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript网页 实现 功能 读取 截图 粘贴 剪贴板
2023-06-13 09:15:27 时间

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

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

输入框的结构代码：

复制代码代码如下:

<inputtype="text"id="testInput"/>

为输入框绑定粘贴事件：

复制代码代码如下:


varinput=document.getElementById("testInput");

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

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

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

复制代码代码如下:
input.addEventListener("paste",function(event){
   //添加到事件对象中的访问系统剪贴板的接口
   varclipboardData=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对其进行读取了。

复制代码代码如下:
varimgReader=function(item){
   varfile=item.getAsFile(),
       reader=newFileReader();

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

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

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


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

复制代码代码如下:

<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<styletype="text/css">
#box{width:200px;height:200px;border:1pxsolid#ddd;}
</style>
</head>
<body>

<h1>利用clipboardData在网页中实现截屏粘贴的功能</h1>  
<hr/>
<div><inputtype="text"id="testInput"placeholder="截屏后粘贴到输入框中"size="30"/></div>

<scripttype="text/javascript">
(function(){
   varimgReader=function(item){
       varblob=item.getAsFile(),
           reader=newFileReader();

       reader.onload=function(e){
           varimg=newImage();

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

       reader.readAsDataURL(blob);
   };

   document.getElementById("testInput").addEventListener("paste",function(e){
   varclipboardData=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>

相关文章