js剪切板應用clipboardData實例解析

更新時間：2016年05月29日 11:34:02 作者：人生夢想起飛

這篇文章主要為大家詳細介紹了js剪切板應用clipboardData實例，并分享了四種實現方法，感興趣的小伙伴們可以參考一下

目前僅有高版本的 Chrome 瀏覽器支持這樣直接粘貼，其他瀏覽器目前為止還無法粘貼,不過火狐和ie11瀏覽器在可編輯的div中能夠粘貼截圖的圖片也是base64位和Chrome利用clipboardData的效果是一樣的，只是在火狐和ie11瀏覽器中目前還無法實現類似用clipboardData直接獲取圖片的base64數據，它是自帶的直接進去img數據。

完整實例：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用clipboardData在網頁中實現截屏粘貼的功能</title>
<style type="text/css">
  .box{ width:500px; height:300px; border:1px solid #ddd; }
  .box img{max-width:480px; max-height: 100%; text-align: center;}
</style>
</head>
<body>
<div class="box" contenteditable="true" id="testInput">
</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;
      console.log(img);
      document.getElementById('testInput').appendChild( img );
    };
    reader.readAsDataURL( blob );
  };

  document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
    //window.clipboardData.getData("Text") ie下獲取黏貼的內容 e.clipboardData.getData("text/plain")火狐谷歌下獲取黏貼的內容
    //alert(e.clipboardData.getData("text/plain") )
    var clipboardData = e.clipboardData,//谷歌
      i = 0,
      items, item, types;
       console.log('0')

    if( clipboardData ){
       console.log('1')
      items = clipboardData.items;
      if( !items ){
        console.log(2)
        return;
      }
      console.log(3)
      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 );
      }
     }
   },false);
})(); 
</script>


</script>

</body>
</html>

實例二：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="div" style="width:100%;height:700px;border:1px solid #ccc;padding:20px" contenteditable="true"></div>
 <script>
  var div = document.getElementById('div');
  div.addEventListener('paste', function(e) {
   if(e.clipboardData) {
    for(var i = 0; i < e.clipboardData.items.length; i++) {
     var c = e.clipboardData.items[i];
     var f = c.getAsFile();
     var reader = new FileReader();
     reader.onload = function(e) {
      div.innerHTML += '<img src="' + e.target.result + '">';
     }
     reader.readAsDataURL(f);
    }
   }
  });
 </script>
</body>
</html>

實現的方法：

方法一：在Chrome瀏覽器中能夠直接通過clipboardData獲取截圖的圖片數據，可以用ajax將數據傳給后臺，然后由后臺開發(fā)返回帶域名的圖片地址

方法二：由于在火狐等瀏覽器中無法直接獲取圖片數據，所以可以在粘貼的時候獲取div中的img的數據是base64的url數據，然后同方法一用ajax

方法三：可以統(tǒng)一在點擊發(fā)布或者保存消息時，獲取div中的img的數據是base64的url數據，然后同方法一用ajax，如果有多張就循環(huán)，也或者是直接點擊保存和發(fā)布的時候，后端開發(fā)做處理，返回來的顯示信息中直接做處理，這樣我們在div中就不需要把base64的url替換成后端返回的帶域名的地址

方法四：在div中粘貼的時候彈出一個彈出層，然后彈出層中有截圖的圖片預覽可確認上傳按鈕，點擊上傳按鈕走ajax上傳圖片同方法一

您可能感興趣的文章: