資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}最近在項(xiàng)目中用到了的方法來獲取圖片的格式數(shù)據(jù)，用以上傳到后臺(tái)。而在上，也明確標(biāo)注了該方法在上有問題。我解決看起來可能真的是安全原因，唯一的安全原因，只可能是跨域圖片了。要先請(qǐng)求一次圖片數(shù)據(jù)不說，數(shù)據(jù)編碼的轉(zhuǎn)換也是相當(dāng)耗時(shí)的。
問題
最近在項(xiàng)目中用到了 canvas 的 toDataURL 方法來獲取圖片的 base64 格式數(shù)據(jù)，用以上傳到后臺(tái)。由于之前也遇到過 canvas 被跨域圖片污染不能獲取數(shù)據(jù)的坑，因此這回一開始就機(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 = "xxx";
本以為萬無一失，而在 Chrome 瀏覽器上面也非常順利；然而到了 IE11 上，卻出現(xiàn)了一個(gè)莫名其妙的 SecurityError 錯(cuò)誤：
沒有具體的報(bào)錯(cuò)信息，只通過提示定位到了執(zhí)行 toDataURL 這一行，實(shí)在讓人疑惑。
嘗試第一時(shí)間 Google 了一下，發(fā)現(xiàn)很多人遇到這個(gè)問題，但是并沒有看到什么有效的解決辦法，有些人建議使用 Fabric.js，但是看了一下覺得太麻煩了點(diǎn)。而在 caniuse 上，也明確標(biāo)注了該方法在 IE11 上有問題。
看起來應(yīng)該是 IE 上的一個(gè) bug，于是想到了一個(gè)曲線救國(guó)的辦法：獲取圖片 base64 數(shù)據(jù)的辦法又不是只有一個(gè)，既然 toDataURL 方法支持不好，那就用別的辦法：
先將 canvas 轉(zhuǎn)成 blob
再用 FileReader 以 dataUrl 的方式讀取
代碼大概如下：
const reader = new FileReader();
reader.readAsDataURL(canvas.msToBlob());
reader.onloadend = () => {
const base64data = reader.result;
};
然而這并沒有什么卵用....
這回輪到了 msToBlob 方法報(bào)了 SecurityError 錯(cuò)誤。我：？？？
看起來可能真的是安全原因，唯一的安全原因，只可能是跨域圖片了。尋思著可能在 IE 上安全策略比較嚴(yán)格，即使設(shè)置了 crossOrigin = "Anonymous" 還是不讓讀數(shù)據(jù)，于是想到了另外一個(gè)思路，既然是因?yàn)榭缬颍蔷桶芽缬蛞蛩厝コ?/p>
使用 ajax 請(qǐng)求拿到圖片的二進(jìn)制數(shù)據(jù)
將二進(jìn)制數(shù)據(jù)轉(zhuǎn)為 base64 格式
將得到的 base64 數(shù)據(jù)作為圖片元素的 src 設(shè)置并畫到畫布上
正常調(diào)用 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 的形式返回?cái)?shù)據(jù)
xmlHTTP.responseType = "arraybuffer";
xmlHTTP.onload = function(e) {
// 1. 將返回的數(shù)據(jù)存儲(chǔ)在一個(gè) 8 位無符號(hào)整數(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. 將二進(jìn)制字符串轉(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);
}
});
}
嘗試了一下，成功達(dá)到了目的。
后來查閱資料得知，如果 canvas 污染了，那無論是 toDataURL 還是 toBlob，都是無法執(zhí)行成功的。
雖然這個(gè)方法可以達(dá)到目的，但是卻犧牲了性能。要先請(qǐng)求一次圖片數(shù)據(jù)不說，數(shù)據(jù)編碼的轉(zhuǎn)換也是相當(dāng)耗時(shí)的。小圖還好，如果圖片比較大，例如超過 3M ，那整個(gè)流程需要花費(fèi)的時(shí)間可以達(dá)到一兩分鐘，這是不可接受的。這里筆者暫時(shí)還沒想到好的解決辦法，各位看官如果有更好的思路，還望告知。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89884.html
摘要：前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是用來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁(yè)面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。 前段時(shí)間做一個(gè)項(xiàng)目，需求是對(duì)每個(gè)視頻添加預(yù)覽圖，這個(gè)問題最終選擇方案是：用canvas.toDataYRL();來做轉(zhuǎn)換獲取視頻的一個(gè)截圖，添加到頁(yè)面中，達(dá)到自動(dòng)添加預(yù)覽圖的目的。部分代碼如下： var testVideo = document....
閱讀 3615·2019-08-30 12:58
閱讀 975·2019-08-29 16:37
閱讀 2885·2019-08-29 16:29
閱讀 3169·2019-08-26 12:18
閱讀 2437·2019-08-26 11:59
閱讀 3477·2019-08-23 18:27
閱讀 2853·2019-08-23 16:43
閱讀 3352·2019-08-23 15:23
