js利用clipboardData实现截屏粘贴功能

2019-11-20 08:46:28

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了clipboardData截屏粘贴实现代码，供大家参考，具体内容如下

<!DOCTYPE html> <html> <head lang="en">   <meta charset="UTF-8">   <title>copyimg</title>    <style type="text/css">     #box{ width:200px; height:200px; border:1px solid #ddd; }   </style>  </head>  <script language="JavaScript">   </script>  <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Angularjs手动解析表达式（$parse）

下一篇：利用jquery给指定的table动态添加一行、删除一行的方法