Base64基本原理及簡單應用

1.什麼是Base64

Base64是一種基於64個可打印字符來表示二進制數據的編碼方式，是從二進制數據到字符的過程。
原則上，計算機中全部內容都是二進制形式存儲的，因此全部內容（包括文本、影音、圖片等）均可以用base64來表示。

2.Base64編碼原理

Base64編碼之因此稱爲Base64，是由於其使用64個字符來對任意數據進行編碼，同理有Base3二、Base16編碼。標準Base64編碼使用的64個字符爲：

有點特殊的是最後兩個字符，因對最後兩個字符的選擇不一樣，Base64編碼又有不少變種，好比用於編碼URL的Base64 URL編碼。

Base64編碼本質上是一種將二進制數據轉成文本數據的方案。對於非二進制數據，是先將其轉換成二進制形式，而後每連續6比特（2的6次方=64）計算其十進制值，根據該值在上面的索引表中找到對應的字符，最終獲得一個文本字符串。

假設咱們要對 Hello! 進行Base64編碼，按照ASCII表，其轉換過程以下圖所示：

可知 Hello! 的Base64編碼結果爲 SGVsbG8h，每3個原始字符經Base64編碼成4個字符。那麼，當原始字符串長度不能被3整除時，怎麼辦呢？

以 Hello!! 爲例，其轉換過程爲：

Hello!! Base64編碼的結果爲 SGVsbG8hIQAA。可見，不能被3整除時會採用來來補0的方式來完成編碼。
須要注意的是：標準Base64編碼一般用 = 字符來替換最後的 A，即編碼結果爲 SGVsbG8hIQ==。由於 = 字符並不在Base64編碼索引表中，其意義在於結束符號，在Base64解碼時遇到 = 時便可知道一個Base64編碼字符串結束。

3.Base64編碼應用

就前端而言，對於一些簡單的圖片，爲了減小外部資源加載，下降頁面加載時間，能夠採用base64將圖片編碼成字符串，直接內嵌到頁面中。這種內嵌方式的實現，得益於大部分瀏覽器對Data URI scheme特性的支持，該特性一般會在CSS設置背景圖片時用到，其格式爲：
background:url(data:文件類型;編碼方式,編碼後的文件內容);
也可經過img標籤嵌入圖片：
<img alt="base64 image" src="data:文件類型;編碼方式,編碼後的文件內容" />

下面說下具體使用方法（以icon圖標爲例）：

1. 下載或製做所需圖標；
2. 使用base64在線編碼工具，將圖標編碼成字符串；
3. 將獲得的字符串複製到你的前端代碼中使用（例如background:url(字符串)）

4.適用場景

通常適用於比較小、色彩層次單一的圖片（如icon圖標），不要試圖用於色彩豐富的較大圖片，儘管可以實現展示，但因爲編碼後的字符串很是大，會明顯增大HTML/CSS文件的大小，影響加載速度。

本文學習網上資料整理而來，僅供我的學習使用，部份內容僅表明我的理解及思考。
主要參考：
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...