javascript实现粘贴qq截图功能（clipboardData）

迈不过友情╰ 2022-04-08 12:49 292阅读 0赞

原文链接：[https://www.jb51.net/article/85338.htm][https_www.jb51.net_article_85338.htm]

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

[https_www.jb51.net_article_85338.htm]: https://www.jb51.net/article/85338.htm