JavaScript圖片的Base64編碼以及轉換詳解

2022-07-27 18:01:01

什麼是 Base64

Base64 是網路中儲存和傳輸的二進位制資料的普遍用法。Base64 一個位元組只能表示 64 種情況，且編碼格式每個位元組的前兩位都只能是 0，使用剩下的 6 位表示內容。

Base64 最早是應用在郵件傳輸協定中的。當時郵件傳輸協定只支援 ASCII 字元傳遞，使用 ASCII 碼來表示所有的英文字元。但是如果要在檔案中傳輸圖片、視訊等資源的話，這些資源轉成 ASCII 的時候會出現非英文數位的情況。而且郵件中還存在很多控制字元，這些控制字元又會成為不可見字元。而且，非英文字元和控制字元在傳輸過程中很容易產生錯誤，影響郵件的正確傳輸。為此才有了誕生了一個新的編碼規則：

把二進位制以 3 個位元組為一組，再把每組的 3 個位元組（24 位）轉換成 4 個 6 位，每 6 位根據查表對應一個 ASCII 符號。

圖片的 Base64 編碼

我們都知道圖片在網頁中的使用方法通常是使用 img 標籤的形式，而 img 標籤的 src 屬性會指定一個遠端伺服器上的資源。在網頁載入到瀏覽器中時，瀏覽器會針對每個外部資源都向伺服器傳送一次拉取資源請求。但是這是非常佔用網路資源的。 而我們經常所說的 Base64 儲存展示，則是使用了Data URL 技術。

我們選擇 Data URL 技術優勢在於：

減少 HTTP 請求；
避免跨域問題；
可像單獨圖片一樣使用，也可以結合CSS Sprites（雪碧圖）使用

Data URL:

Data URLs，即字首為 data: 協定的 URL，其允許內容建立者向檔案中嵌入小檔案。

Data URLs 由四個部分組成：字首 (data:)、指示資料型別的 MIME 型別、如果非文字則為可選的base64標記、資料本身：
data:[<mediatype>][;base64],<data>

圖片轉 Base64 的程式碼

由前端程式設計師來將圖片轉為 Base64 編碼的場景還是非常多的，而且網上搜尋的方法好多都沒法用

JavaScript圖片的Base64編碼以及轉換詳解

目錄

什麼是 Base64

圖片的 Base64 編碼

圖片轉 Base64 的程式碼

熱門文章