国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js 粘貼圖片的應用(clipboardData)

Euphoria / 989人閱讀

摘要:起因應項目需求,需要用某個工具截圖然后粘貼上傳到后臺的功能于是著手搜查資料,最終的結果就是找到了這個對象,然后開始著手一谷歌瀏覽器相信這個也是很多開發者都在用的瀏覽器,當然也是嘗試的開始。

clipboardData

起因:應項目需求,需要用某個工具截圖然后粘貼上傳到后臺的功能!于是著手搜查資料,最終的結果就是找到了這個對象clipboardData,然后開始著手!

一、谷歌chrome瀏覽器

相信這個也是很多開發者都在用的瀏覽器,當然也是嘗試的開始。整個過程是這樣的

1)使用微信截圖
2)`"?+v, ctrl+v"`在這個頁面的隨意位置粘貼
3)執行上傳圖片到后臺的流程(產生loading狀態)

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

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

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

URL是一個公用的對象

第二種方法是用base64的方法可以實現, 需要借助FileReader對象
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);

以上就是在谷歌瀏覽器中實現的方法了!但是僅限在谷歌瀏覽器,因為此項目在mac上開發,所以就嘗試了在safari中試著運行,結果一點反應都沒有,哎,相繼查了很多的資料才懂了一點點,這里也就簡單的分享下,希望對這一塊比較有深入了解的人來評論、指導下我。

問題1

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

所以想要獲取對象只能這樣了,具體代碼如下,借助jq
base64轉換為blob對象
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
    });
  };
base64 轉為 文件對象
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"); //使用這個圖片的時候需要加入這個屬性crossOrigin,因為需要開啟允許跨域
          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")) }) })

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94283.html

相關文章

  • js獲取剪切板內容,js控制圖片粘貼

    摘要:在用戶執行粘貼操作的時候,能夠獲得剪切板的內容,本文討論一下這個問題。目前只有支持獲取剪切板中的圖片數據。這么多的判斷條件,基本可以確定通過剪切板過來的是粘貼的文件。 在用戶執行粘貼操作的時候,js能夠獲得剪切板的內容,本文討論一下這個問題。 目前只有Chrome支持獲取剪切板中的圖片數據。還好需要這個功能的產品目前只支持Chrome和Safari,一些Chrome的新特性是可以盡情使...

    KaltZK 評論0 收藏0
  • 【在網頁中獲取截圖數據】Chrome和Firefox下實戰經驗

    摘要:最近在實現一個功能,需求如下前提當前頁面無彈窗頁面任意位置執行粘貼讀取剪切板中的截屏數據上傳截圖首先還是從網上找相關的例子。找到了上的專欄文章獲取剪切板內容,控制圖片粘貼。 最近在實現一個功能,需求如下: 前提:當前頁面無彈窗 頁面任意位置執行粘貼 讀取剪切板中的截屏數據 上傳截圖 首先還是從網上找相關的例子。 找到了SF上的專欄文章《js獲取剪切板內容,js控制圖片粘貼》。 于是...

    vslam 評論0 收藏0
  • js利用clipboardData在網頁中實現截屏粘貼功能

    摘要:最近在做一個將屏幕截圖直接粘貼發送的功能,于是對此做了一些研究,下面是具體的實現代碼代碼如下,在這里只是簡單的做了一個框用作演示截屏粘貼具體實現在中保存在剪貼板中的數據類型判斷是否為圖片數據讀取該圖片下面是講粘貼的圖片內容傳送到后端進行 最近在做一個將屏幕截圖直接粘貼發送的功能,于是對此做了一些研究,下面是具體的實現代碼:html代碼如下,在這里只是簡單的做了一個textare框用作演...

    cuieney 評論0 收藏0
  • js實現圖片粘貼上傳到服務器并展示

    摘要:如果有錯誤,,可通過下文中的監聽函數拿到該錯誤碼進行自定義處理是一個數組,返回若干圖片的線上地址圖片地址圖片地址參考部分 最近看了一些有關于js實現圖片粘貼上傳的demo,實現如下: (這里只能檢測到截圖粘貼和圖片右鍵復制之后粘貼) demo1: document.addEventListener(paste, function (event) { consol...

    imingyu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<