資訊專欄INFORMATION COLUMN
摘要：問題最近在項目中用到了的方法來獲取圖片的格式數據，用以上傳到后臺。而在上，也明確標注了該方法在上有問題。我解決看起來可能真的是安全原因，唯一的安全原因，只可能是跨域圖片了。要先請求一次圖片數據不說，數據編碼的轉換也是相當耗時的。
問題
最近在項目中用到了 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((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 ，那整個流程需要花費的時間可以達到一兩分鐘，這是不可接受的。這里筆者暫時還沒想到好的解決辦法，各位看官如果有更好的思路，還望告知。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89884.html
摘要：前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是用來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。 前段時間做一個項目，需求是對每個視頻添加預覽圖，這個問題最終選擇方案是：用canvas.toDataYRL();來做轉換獲取視頻的一個截圖，添加到頁面中，達到自動添加預覽圖的目的。部分代碼如下： var testVideo = document....
閱讀 3540·2019-08-30 12:58
閱讀 923·2019-08-29 16:37
閱讀 2796·2019-08-29 16:29
閱讀 3105·2019-08-26 12:18
閱讀 2365·2019-08-26 11:59
閱讀 3405·2019-08-23 18:27
閱讀 2770·2019-08-23 16:43
閱讀 3301·2019-08-23 15:23
