日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法

云知道

發(fā)現(xiàn)問題

最近在項目中用到了 canvas 的 toDataURL 方法來獲取圖片的 base64 格式數(shù)據(jù)，用以上傳到后臺 。由于之前也遇到過 canvas 被跨域圖片污染不能獲取數(shù)據(jù)的坑，因此這回一開始就機智的把 crossOrigin 屬性值加上，代碼大概如下：
const canvas = document.createElement("canvas");const context = canvas.getContext("2d");context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);const imageElement = document.createElement("img");imageElement.crossOrigin = "Anonymous";imageElement.onload = () = { context.drawImage( imageElement, params.left, params.top, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height ); const dataUrl = canvas.toDataURL("image/jpeg", 1);}imageElement.src = https://www.rkxy.com.cn/dnjc/’xxx’;【IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法】本以為萬無一失，而在 Chrome 瀏覽器上面也非常順利；然而到了 IE11 上，卻出現(xiàn)了一個莫名其妙的 SecurityError 錯誤：

IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法


沒有具體的報錯信息，只通過提示定位到了執(zhí)行 toDataURL 這一行，實在讓人疑惑 。
嘗試

第一時間 Google 了一下，發(fā)現(xiàn)很多人遇到這個問題，但是并沒有看到什么有效的解決辦法，有些人建議使用 Fabric.js，但是看了一下覺得太麻煩了點 。而在 caniuse 上，也明確標注了該方法在 IE11 上有問題 。

看起來應該是 IE 上的一個 bug，于是想到了一個曲線救國的辦法：獲取圖片 base64 數(shù)據(jù)的辦法又不是只有一個，既然 toDataURL 方法支持不好，那就用別的辦法：
先將 canvas 轉(zhuǎn)成 blob再用 FileReader 以 dataUrl 的方式讀取代碼大概如下：
const reader = new FileReader();reader.readAsDataURL(canvas.msToBlob());reader.onloadend = () = { const base64data = https://www.rkxy.com.cn/dnjc/reader.result;};然而這并沒有什么卵用....

這回輪到了 msToBlob 方法報了 SecurityError 錯誤 。我：？？？
解決

看起來可能真的是安全原因，唯一的安全原因，只可能是跨域圖片了 。尋思著可能在 IE 上安全策略比較嚴格，即使設置了 crossOrigin = "Anonymous" 還是不讓讀數(shù)據(jù)，于是想到了另外一個思路，既然是因為跨域，那就把跨域因素去除：
使用 ajax 請求拿到圖片的二進制數(shù)據(jù)將二進制數(shù)據(jù)轉(zhuǎn)為 base64 格式將得到的 base64 數(shù)據(jù)作為圖片元素的 src 設置并畫到畫布上正常調(diào)用 toDataURL代碼大致如下：
// 之前的代碼// ...// 最后一行 imageElement.src = https://www.rkxy.com.cn/dnjc/’xxx’ 替換：getDataUrlBySrc(’xxx’).then(b64 = (imageElement.src = b64));function getDataUrlBySrc(src: string) { return new Promisestring((resolve, reject) = { if (Cache.localGet("isIE")) {const xmlHTTP = new XMLHttpRequest();xmlHTTP.open("GET", src, true);// 以 ArrayBuffer 的形式返回數(shù)據(jù)xmlHTTP.responseType = "arraybuffer";xmlHTTP.onload = function(e) {// 1. 將返回的數(shù)據(jù)存儲在一個 8 位無符號整數(shù)值的類型化數(shù)組里面const arr = new Uint8Array(xmlHTTP.response);// 2. 轉(zhuǎn)為 charCode 字符串const raw = Array.prototype.map.call(arr, charCode = String.fromCharCode(charCode)).join("");// 3. 將二進制字符串轉(zhuǎn)為 base64 編碼的字符串const b64 = btoa(raw);const dataURL = "data:image/jpeg;base64,"b64;resolve(dataURL);};xmlHTTP.onerror = function(err) {reject(err);};xmlHTTP.send(); } else {resolve(src); } });}嘗試了一下，成功達到了目的 。

后來查閱資料得知，如果 canvas 污染了，那無論是 toDataURL 還是 toBlob，都是無法執(zhí)行成功的 。
缺陷

雖然這個方法可以達到目的，但是卻犧牲了性能 。要先請求一次圖片數(shù)據(jù)不說，數(shù)據(jù)編碼的轉(zhuǎn)換也是相當耗時的 。小圖還好，如果圖片比較大，例如超過 3M，那整個流程需要花費的時間可以達到一兩分鐘，這是不可接受的 。

推薦閱讀