關於圖片轉換的一些事

前言

前幾天作項目遇到了一個問題，如何把base64的格式的圖片編碼轉換爲圖片的File對象。而後網上也找到了一下具體的實現方法，當中涉及到了一些編碼轉換的知識，所以特意來總結一下。 先上一段代碼

let byteString;
 if (base64Data.split(",")[0].indexOf("base64") >= 0) byteString = atob(base64Data.split(",")[1]);
 else byteString = unescape(base64Data.split(",")[1]);
 let mime = base64Data
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];
  let ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mime });
複製代碼

base64

百度百科的解釋是：網絡上最多見的用於傳輸8Bit字節碼的編碼方式之一，Base64就是一種基於64個可打印字符來表示二進制數據的方法。簡單點說就是將二進制編碼轉成ASCII編碼，並且base64通常用於http協議下的二進制傳輸。 優勢：能將二進制數據轉化爲可打印的字符，方便傳輸，並且也方便加密。 缺點：轉化後內容體積過大，編碼和解碼須要工做量。

atob

window對象的內置方法，用於解碼使用 base64 編碼的字符串。與之相反的就是btoa，用於base64編碼

let string = window.btoa('hello');
console.log(string);
let result = window.atob(string);
console.log(result);
複製代碼

打印結果

Uint8Array

MDN的解釋是：表示一個8位無符號整型數組，建立時內容被初始化爲0。建立完後，能夠以對象的方式或使用數組下標索引的方式引用數組中的元素。它這裏面其實能存儲任何格式的數據，包括對象，數組，字符串，數字，布爾值等等。其實就是存儲數據的一種方法。

unescape

unescape() 函數可對經過 escape() 編碼的字符串進行解碼。
該函數的工做原理是這樣的：經過找到形式爲 %xx 和 %uxxxx 的字符序列（x 表示十六進制的數字），用 Unicode 字符 \u00xx 和 \uxxxx 替換這樣的字符序列進行解碼。
可是，ECMAScript v3 已從標準中刪除了 unescape() 函數，其實應該用 decodeURI() 和 decodeURIComponent()代替。

Blob

Blob 對象表示一個不可變、原始數據的類文件對象。Blob表示的不必定是JavaScript原生格式的數據。File 接口基於Blob，繼承了blob的功能並將其擴展使其支持用戶系統上的文件。 所以將這是咱們轉化File文件依賴的關鍵的對象方法。
正常新建一個blob對象須要兩個參數

• 數據序列，能夠是任意格式的值
• 指定將要放入Blob中的數據的類型(MIME)

解釋

綜合以上的編碼知識，再來看看最上面的代碼，其實就很好理解了。
base64 一般開頭會有data:image/png;base64這樣格式的字符串

function(base64Data) {
    let byteString;  //聲明一個字符串存儲對象
    //判斷傳入的參數是不是base64格式的字符串
     if (base64Data.split(",")[0].indexOf("base64") >= 0) 
     {   //使用 atob解碼base64字符串
        byteString = atob(base64Data.split(",")[1]);
     } else {
        //如若不是，就shi用unescape解碼
        byteString = unescape(base64Data.split(",")[1]);
     }
     let mime = base64Data //截取出轉換的文件格式，也就是"image/png"
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      let ia = new U int8 Array(byteString.length); //建立一個Uint8Array對象，長度爲byteString的長度
      
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i); //讀取指定位置的字符的 Unicode 編碼
      }
      return new Blob([ia], { type: mime });//最後生成並返回 blob對象
}
複製代碼

以上base64的轉換就完成了。
最後一步，生成File對象

let file = new File([blob], "portrait.jpg", {
  type: "image/jpeg"        
 });
複製代碼

File對象接收三個參數

• blob對象
• 生成文件的名稱
• 額外參數 type表示具體的格式

這就是base64轉換File對象的全過程，其中須要掌握的知識還挺多的。

參考文獻鏈接:
Uint8Array
unescape
blob
base64