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

來源：懂視網責編：小采時間：2020-11-27 22:25:33

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

IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法:發現問題最近在項目中用到了 canvas 的 toDataURL 方法來獲取圖片的 base64 格式數據，用以上傳到后臺。由于之前也遇到過 canvas 被跨域圖片污染不能獲取數據的坑，因此這回一開始就機智的把 crossOrigin 屬性值加上，代碼大概如下： const ca

推薦度：

點擊下載本文 文檔為doc格式

導讀IE11下使用canvas.toDataURL報SecurityError錯誤的解決方法:發現問題最近在項目中用到了 canvas 的 toDataURL 方法來獲取圖片的 base64 格式數據，用以上傳到后臺。由于之前也遇到過 canvas 被跨域圖片污染不能獲取數據的坑，因此這回一開始就機智的把 crossOrigin 屬性值加上，代碼大概如下： const ca

發現問題

最近在項目中用到了 canvas 的 toDataURL 方法來獲取圖片的 base64 格式數據，用以上傳到后臺。由于之前也遇到過 canvas 被跨域圖片污染不能獲取數據的坑，因此這回一開始就機智的把 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 = 'xxx';

本以為萬無一失，而在 Chrome 瀏覽器上面也非常順利；然而到了 IE11 上，卻出現了一個莫名其妙的 SecurityError 錯誤：

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

嘗試

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

看起來應該是 IE 上的一個 bug，于是想到了一個曲線救國的辦法：獲取圖片 base64 數據的辦法又不是只有一個，既然 toDataURL 方法支持不好，那就用別的辦法：

先將 canvas 轉成 blob

再用 FileReader 以 dataUrl 的方式讀取

代碼大概如下：

const reader = new FileReader();
reader.readAsDataURL(canvas.msToBlob());
reader.onloadend = () => {
 const base64data = reader.result;
};

然而這并沒有什么卵用....

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

解決

看起來可能真的是安全原因，唯一的安全原因，只可能是跨域圖片了。尋思著可能在 IE 上安全策略比較嚴格，即使設置了 crossOrigin = "Anonymous" 還是不讓讀數據，于是想到了另外一個思路，既然是因為跨域，那就把跨域因素去除：

使用 ajax 請求拿到圖片的二進制數據

將二進制數據轉為 base64 格式

將得到的 base64 數據作為圖片元素的 src 設置并畫到畫布上

正常調用 toDataURL

代碼大致如下：

// 之前的代碼
// ...
// 最后一行 imageElement.src = 'xxx' 替換：
getDataUrlBySrc('xxx').then(b64 => (imageElement.src = b64));

function getDataUrlBySrc(src: string) {
 return new Promise<string>((resolve, reject) => {
 if (Cache.localGet("isIE")) {
 const xmlHTTP = new XMLHttpRequest();
 xmlHTTP.open("GET", src, true);

 // 以 ArrayBuffer 的形式返回數據
 xmlHTTP.responseType = "arraybuffer";

 xmlHTTP.onload = function(e) {
 
 // 1. 將返回的數據存儲在一個 8 位無符號整數值的類型化數組里面
 const arr = new Uint8Array(xmlHTTP.response);
 
 // 2. 轉為 charCode 字符串
 const raw = Array.prototype.map
 .call(arr, charCode => String.fromCharCode(charCode))
 .join("");
 
 // 3. 將二進制字符串轉為 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，都是無法執行成功的。

缺陷

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

canvas的toDataUrl是否會壓縮圖像？

使用canvas的drawImage方法將image對象draw到canvas畫布上時，圖片大小會顯著增加，并且只能保存為PNG格式。

將canvas用toDataUrl轉化為base64，即使encoderOptions設置為1，圖片也會有較大幅度的減小，但是比起最初的image還是要大。如果encoderOptions使用默認的0.92，最終的圖片大小和初始的是相差不多的

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com