在IE11下裡使用canvas.toDataURL相容性問題的解決思路
- php中世界最好的语言原創
- 2018-04-14 14:12:506689瀏覽
這次帶給大家在IE11下裡使用canvas.toDataURL相容性問題的解決思路，解決IE11下裡使用canvas.toDataURL相容性問題的注意事項有哪些，以下就是實戰案例，一起來看一下。
發現問題
最近在專案中用到了 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);
}
});
}</string>
嘗試了一下，成功達到目的了。
後來查閱資料得知，如果 canvas 污染了，那麼無論是 toDataURL 或 toBlob，都是無法執行成功的。
缺陷
雖然這個方法可以達到目的，但卻犧牲了性能。要先請求一次圖片資料不說，資料編碼的轉換也是相當耗時的。小圖還好，如果圖片比較大，例如超過 3M ，那麼整個流程需要花費的時間可以達到一兩分鐘，這是不可接受的。
canvas的toDataUrl是否會壓縮影像？
使用canvas的drawImage方法將image物件draw到canvas畫布上時，圖片大小會顯著增加，並且只能儲存為PNG格式。
將canvas用toDataUrl轉換為base64，即使encoderOptions設定為1，圖片也會有較大幅度的減小，但是比起最初的image還是要大。如果encoderOptions使用預設的0.92，最終的圖片大小和初始的是相差不多的
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是在IE11下裡使用canvas.toDataURL相容性問題的解決思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！