摘要：起因應(yīng)項(xiàng)目需求，需要用某個(gè)工具截圖然后粘貼上傳到后臺(tái)的功能于是著手搜查資料，最終的結(jié)果就是找到了這個(gè)對(duì)象，然后開(kāi)始著手一谷歌瀏覽器相信這個(gè)也是很多開(kāi)發(fā)者都在用的瀏覽器，當(dāng)然也是嘗試的開(kāi)始。

起因：應(yīng)項(xiàng)目需求，需要用某個(gè)工具截圖然后粘貼上傳到后臺(tái)的功能！于是著手搜查資料，最終的結(jié)果就是找到了這個(gè)對(duì)象clipboardData，然后開(kāi)始著手！

相信這個(gè)也是很多開(kāi)發(fā)者都在用的瀏覽器，當(dāng)然也是嘗試的開(kāi)始。整個(gè)過(guò)程是這樣的

1）使用微信截圖
2）`"?+v, ctrl+v"`在這個(gè)頁(yè)面的隨意位置粘貼
3）執(zhí)行上傳圖片到后臺(tái)的流程(產(chǎn)生loading狀態(tài))

document.body.addEventListener("paste", files, false)
//files是一個(gè)方法，里面的參數(shù)為event
function files(event) {
    //谷歌瀏覽器的的粘貼文件在這個(gè)對(duì)象下面
    if (event.clipboardData || event.originalEvent) {
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        
        //獲取文件的屬性就在這里獲取，打印該對(duì)象可以看到相關(guān)屬性，結(jié)果的操作就在items里面，所以需要循環(huán)items
        let fileObj = null
        for (var i = 0; i < len; i++) {
              // console.log(items[i]);
              if (items[i].type.indexOf("image") !== -1) {
                  //getAsFile() 此方法只是該瀏覽器下才會(huì)有的方法 
                  fileObj = items[i].getAsFile();
              }
          }
        if(fileObj !== null) {
          fileObj就是一個(gè)文件對(duì)象，此刻就可以進(jìn)行文件的處理了，例如用formdata的形式傳遞給后臺(tái)，這個(gè)自行百度，本片章不與講述。
        }
        
        
    }
    
}

如果需要在頁(yè)面中顯示可以有兩種方法顯示圖片

第一種
在上面的代碼if處接著寫
if(fileObj !== null) {
    var fileUrl=URL.createObjectURL(blob);
    document.getElementById("imgNode").src=fileUrl;
}

URL是一個(gè)公用的對(duì)象

第二種方法是用base64的方法可以實(shí)現(xiàn)， 需要借助FileReader對(duì)象
var reader = new FileReader();
reader.onload = function (event) {
  //event.target.result 即為圖片的Base64編碼字符串
   var base64_str = event.target.result;
   document.getElementById("imgNode").src=base64_str;
}
 reader.readAsDataURL(blob);

以上就是在谷歌瀏覽器中實(shí)現(xiàn)的方法了！但是僅限在谷歌瀏覽器，因?yàn)榇隧?xiàng)目在mac上開(kāi)發(fā)，所以就嘗試了在safari中試著運(yùn)行，結(jié)果一點(diǎn)反應(yīng)都沒(méi)有，哎，相繼查了很多的資料才懂了一點(diǎn)點(diǎn)，這里也就簡(jiǎn)單的分享下，希望對(duì)這一塊比較有深入了解的人來(lái)評(píng)論、指導(dǎo)下我。

document.body下的onpaste不起作用，現(xiàn)在也沒(méi)有查到，于是乎只能在div(contenteditable)下嘗試了一下下。但是發(fā)現(xiàn)clipboardData下面并沒(méi)有items這個(gè)對(duì)象，所以上面的方法也就不成立了，具體的哪些數(shù)據(jù)可以參考這篇文章，上面介紹了他屬性的一些要求，所以只能另謀方法了！查閱了好多資料明白了一些！
safari粘貼的數(shù)據(jù)根本就沒(méi)有存在clipboardData這個(gè)對(duì)象下，而是在這個(gè)div下添加了一個(gè)圖片，新建了一個(gè)img標(biāo)簽，然后src指向本地的blob鏈接數(shù)據(jù)，不信的話你們可以自己打印一下。

所以想要獲取對(duì)象只能這樣了，具體代碼如下，借助jq

function dataURLtoBlob(dataURL, sliceSize) {
    var b64Data, byteArray, byteArrays, byteCharacters, byteNumbers, contentType, i, m, offset, ref, slice;
    if (sliceSize == null) {
      sliceSize = 512;
    }
    if (!(m = dataURL.match(/^data:([^;]+);base64,(.+)$/))) {
      return null;
    }
    ref = m, m = ref[0], contentType = ref[1], b64Data = ref[2];
    byteCharacters = atob(b64Data);
    byteArrays = [];
    offset = 0;
    while (offset < byteCharacters.length) {
      slice = byteCharacters.slice(offset, offset + sliceSize);
      byteNumbers = new Array(slice.length);
      i = 0;
      while (i < slice.length) {
        byteNumbers[i] = slice.charCodeAt(i);
        i++;
      }
      byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
      offset += sliceSize;
    }
    return new Blob(byteArrays, {
      type: contentType
    });
  };

function dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type:mime});
  }

var _checkImagesInContainer = function(that,cb) {
    var img, j, len, ref, timespan;
    timespan = Math.floor(1000 * Math.random());

    ref = that.find("img");
    for (j = 0, len = ref.length; j < len; j++) {
      img = ref[j];
      img["_paste_marked_" + timespan] = true;
    }
    return setTimeout((function(_this) {
      return function() {
        var k, len1, ref1;
        ref1 = _this.find("img");
        for (k = 0, len1 = ref1.length; k < len1; k++) {
          img = ref1[k];
          if (!img["_paste_marked_" + timespan]) {
            cb(img.src);
            $(img).remove();
          }
        }
      };
    })(that), 1);
 };

_handleImage = function(src, e, name) {
    var loader;
    loader = new Image();
    loader.crossOrigin = "anonymous";
    loader.onload = (function(_this) {
      return function() {
        var blob, canvas, ctx, dataURL;
        canvas = document.createElement("canvas");
        canvas.width = loader.width;
        canvas.height = loader.height;
        ctx = canvas.getContext("2d");
        ctx.drawImage(loader, 0, 0, canvas.width, canvas.height);
        dataURL = null;
        try {
          dataURL = canvas.toDataURL("image/png"); //使用這個(gè)圖片的時(shí)候需要加入這個(gè)屬性crossOrigin，因?yàn)樾枰_(kāi)啟允許跨域
          blob = dataURLtoBlob(dataURL);
          console.log(dataURLtoFile(dataURL, "test"))
        } catch (error) {}
        if (dataURL) {
          // _this._target.trigger("pasteImage", {
          //   blob: blob,
          //   dataURL: dataURL,
          //   width: loader.width,
          //   height: loader.height,
          //   originalEvent: e,
          //   name: name
          // });
        }
      };
    })(this);
    return loader.src = src;
  };

$(".input").on("paste", function (event) {
   _checkImagesInContainer($(".input"), function (src) {
       _handleImage(src, $(".input"))
   })
        
})