發(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 = 'xxx';

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

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

嘗試

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

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

• 先將 canvas 轉(zhuǎn)成 blob
• 再用 FileReader 以 dataUrl 的方式讀取

代碼大概如下：

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

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

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

解決

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

• 使用 ajax 請求拿到圖片的二進(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<string>((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. 將二進(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í)行成功的。

缺陷

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

canvas的toDataUrl是否會壓縮圖像？

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論