探究 Base64 在前端的原理和應用

1. 前言

Base64 在前端開發中的普遍應用。本文將探討 Base64 編碼的原理以及在前端項目中應用的實際應用。

2. 什麼是 Base64

2.1 Base64 的起源

Base64 編碼的產生與數據傳輸和處理的需求有關，它主要解決了在傳輸二進制數據時遇到的一些問題。在早期的網絡通信中，許多傳輸協議（如電子郵件）只支持傳輸文本數據。而二進制數據（如圖像、音頻、視頻等）無法直接在文本協議中傳輸。

此時 Base64 由此孕育而生，Base64 編碼的目的是將二進制數據轉換爲一組可打印的 ASCII 字符，以便在文本協議中傳輸或存儲。

2.2 Base64 編碼的設計

Base64 是基於 64 個可打印字符來表示二進制的表示方法，每 6 個比特爲一個單元對應一個可打印字符。它主要是通過 6bit 字符來表達原本的 8bit 字符。在 Base64 中可打印字符有以下組成：

A,B,C,D ....Z 26 個大寫字母 a,b,c,d ....z 26 個小寫字母 0,1,2,3 ....9 10 個阿拉伯數字 外加 2 個特殊字符 + /

共 64 個字符，此外還有等號 = 作爲後綴作爲補充。

3. Base64 編碼的原理

從上面我們瞭解到了什麼是 Base64 編碼，下面我們一起來看下是如何進行轉換的。如下所示，字符串 Man 的編碼圖解。

我們從中可以看到，由 3 個字符 Man 的編碼轉換之後的結果爲 4 個字符的 TWFu，顯然 Base64 編碼之後的字符會比原始的字符多  1/3。

上面我們看到的是被 3 整除的字節數是轉換成 4 個字符，如果是不能被 3 整除的字節數，又是什麼樣的結果哪？下面進行分析一下。

編碼的字節數不能被 3 整除，處理方法是：先使用 0 字節值在末尾補足，使其能夠被 3 整除，然後再進行 Base64 的編碼。A 字符的前 6 個比特可以作爲一個 Base64 字符，剩下的 2 個字節後面需要補 4 個 0 補足 6 位，作爲第二個 Base64 字符，第三個和第四個 Base64 字符沒有內容，需要我們用 = 補充。

字符 A 的編碼爲 QQ==,  BC 對應的編碼爲 QKM=。

3. Base64 在前端的常見應用場景

Base64 在前端方面的應用，多數都是針對圖片的處理，一般都是基於 DataURL 的方式來使用。

Data URL 由 data:前綴、MIME類型（表明數據類型）、base64標誌位（如果是文本，則可選）以及 數據本身 四部分組成。 具體的格式：data:[<mime type>][;base64],<data>。 這裏的第四部分 <data> 數據本身，就是一個 Base64 字符串。

3.1 圖像處理

function readAsDataURL() {   

     const fileElement = document.getElementById("imageInput");    

     return new Promise((resolve, reject) => {        

        const fd = new FileReader();       

         fd.readAsDataURL(fileElement.files[0]);        

         fd.onload = function () {           
   
            resolve(fd.result); // data:image/png;base64,QkNxd2VydHl1aW9hc....            

        }       

        fd.onerror = reject;   

     }); 

}

3.2 字體文件

@font-face {
  font-family: 'CustomFont';
  src: url(data:application/font-woff;base64,QkNxd2VydHl1aW9hc...) format('woff');
}

.custom-font-example {
  font-family: 'CustomFont', sans-serif;
}

3.3 小背景圖片

.icon {
  background-image: url('data:image/png;base64,QkNxd2VydHl1aW9hc...');
  width: 16px;
  height: 16px;
  display: inline-block;
}

3.4 icon 圖標優化

<link rel="icon" href="data:image/x-icon;base64,QkNxd2VydHl1aW9hc..." />

除了處理圖片展示外，還會在特殊數據傳輸、簡單編碼和加密、代碼混淆、部分證書中，見到 Base64 編碼字符串。

4. Base64 的優缺點

4.1 優點

  1. 文本表示：Base64 編碼將二進制數據轉換爲可打印的ASCII字符集，方便在文本環境中傳輸和存儲，因爲幾乎所有的系統都能處理文本數據。

  2. 減少請求：如果是在html或者css處理圖片，可以減少http請求。

  3. 數據完整性：Base64 編碼不改變數據內容，只是進行編碼，所以解碼後可以完全還原原始數據，不會丟失信息。

  4. URL 安全：Base64 編碼通常用於 URL 參數傳遞，因爲它可以避免一些特殊字符對 URL 的影響。

4.2 缺點

  1. 增加數據大小：內容編碼後體積變大， 至少 1/3，因爲每 3 個字節的二進制數據編碼成 4 個字符的 Base64 字符串，當只有 1 個字節的時候，也至少會變成 3 個字節。導致數據膨脹。

  2. 可讀性差：Base64 編碼後的字符串包含大量字符，降低了可讀性和人類識別的能力。

  3. 不適合大型二進制數據：對於大型二進制數據（如大型圖像或視頻文件），Base64 編碼後的字符串長度會非常龐大，增加了數據傳輸和處理的負擔。

5. 結論

從上文中我們探討了 Base64 編碼的原理以及在 web 中的實際應用，通過文章的介紹，希望對你 Base64 有一個更深的認識。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/5Fr25M9exQFse_sUHExhOw

猜你喜歡