目錄

• 初步認(rèn)識(shí)
• Base64是怎么誕生的
• 基礎(chǔ)定義
• 編碼方式
• 體積增大
• = 等號(hào)
• 非ASCII碼字符
• 編解碼方法
• btoa 和 atob
• 第三方庫(kù)
• 前端常見應(yīng)用
• 小圖片轉(zhuǎn)碼
• 文件讀取
• Canvas生成圖片
• 其他
• 總結(jié)

在我們進(jìn)行前端開發(fā)時(shí)，針對(duì)項(xiàng)目?jī)?yōu)化，常會(huì)提到一條：針對(duì)較小圖片，合理使用Base64字符串替換內(nèi)嵌，可以減少頁(yè)面http請(qǐng)求。

并且還會(huì)特別強(qiáng)調(diào)下，必須是小圖片，大小不要超過(guò)多少KB，等等。

那么，Base64又到底是什么呢？

初步認(rèn)識(shí)

下面的這段字符串，應(yīng)該是大家都很常見的。

通過(guò)這種固定的格式，來(lái)表示一張圖片，并被瀏覽器識(shí)別，可以完整的展示出圖片：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......

這里展示的是svg格式的圖片，當(dāng)然我們還能加載任何瀏覽器支持的格式的圖片。

這段字符串就是基于Base64編碼得來(lái)的，其中base64,后面那一長(zhǎng)串的字符串，就是Base64編碼字符串。

Base64是怎么誕生的

互聯(lián)網(wǎng)發(fā)展早起，電子郵件是最有效的應(yīng)用。

而電子郵件的SMTP傳輸協(xié)議在早期，只能用于傳送7位的ASCII碼，而ASCII碼就是基于英語(yǔ)設(shè)計(jì)的，對(duì)于非英語(yǔ)國(guó)家的文字等資源就無(wú)法發(fā)送。

為了解決這個(gè)問(wèn)題，后來(lái)有了通用互聯(lián)網(wǎng)郵件擴(kuò)充MIME，增加了郵件的主體結(jié)構(gòu)，定義了非ASCII碼的編碼傳輸規(guī)則，這就是Base64。

關(guān)于字符編碼的知識(shí)，請(qǐng)查看前端開發(fā)中需要搞懂的字符編碼知識(shí)

基礎(chǔ)定義

Base64是基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的編解碼方式。

正因?yàn)榭删幗獯a，所以它主要的作用不在于安全性，而在于讓內(nèi)容能在各個(gè)網(wǎng)關(guān)間無(wú)錯(cuò)的傳輸。

這64個(gè)可打印字符包括大寫字母A-Z、小寫字母a-z、數(shù)字0-9共62個(gè)字符，再加上另外2個(gè) + 和 /。

Base64是一種索引編碼，每個(gè)字符都對(duì)應(yīng)一個(gè)索引，具體的關(guān)系圖，如下：

這也是名稱中64的由來(lái)。

編碼方式

由于64等于2的6次方，所以一個(gè)Base64字符實(shí)際上代表著6個(gè)二進(jìn)制位(bit)。

然而，二進(jìn)制數(shù)據(jù)1個(gè)字節(jié)(byte)對(duì)應(yīng)的是8比特(bit)，因此，3字節(jié)（3 x 8 = 24比特）的字符串/二進(jìn)制數(shù)據(jù)正好可以轉(zhuǎn)換成4個(gè)Base64字符(4 x 6 = 24比特)。

為什么是3個(gè)字節(jié)一組呢？ 因?yàn)?和8的最小公倍數(shù)是24，24比特正好是3個(gè)字節(jié)。

具體的編碼方式：

• 將每3個(gè)字節(jié)作為一組，3個(gè)字節(jié)一共24個(gè)二進(jìn)制位
• 將這24個(gè)二進(jìn)制位分為4組，每個(gè)組有6個(gè)二進(jìn)制位
• 在每組的6個(gè)二進(jìn)制位前面補(bǔ)兩個(gè)00，擴(kuò)展成32個(gè)二進(jìn)制位，即四個(gè)字節(jié)
• 每個(gè)字節(jié)對(duì)應(yīng)的將是一個(gè)小于64的數(shù)字，即為字符編號(hào)
• 再根據(jù)字符索引關(guān)系表，每個(gè)字符編號(hào)對(duì)應(yīng)一個(gè)字符，就得到了Base64編碼字符

上圖中的字符串 'you'，經(jīng)過(guò)轉(zhuǎn)換后，得到的編碼為： 'eW91'。

體積增大

我們可以看到，當(dāng)3個(gè)字符進(jìn)行Base64轉(zhuǎn)換編碼后，最后變成了4個(gè)字符。因?yàn)槊總€(gè)6比特位，都補(bǔ)了2個(gè)0，變成8比特位，對(duì)應(yīng)1字節(jié)。

這里正好多了三分之一，所以正常情況下，Base64編碼的數(shù)據(jù)體積通常比原數(shù)據(jù)的體積大三分之一。

這也是為什么我們?cè)谇懊嬷v使用Base64編碼優(yōu)化圖片時(shí)，需要強(qiáng)調(diào)是小圖標(biāo)，如果圖片都使用該方式，則靜態(tài)文件會(huì)增大很多，并不合適。

= 等號(hào)

3個(gè)英文字符，正好能轉(zhuǎn)成4個(gè)Base64字符。那如果字符長(zhǎng)度不是3的倍數(shù)，那應(yīng)該使用什么樣的規(guī)則呢？

其實(shí)也簡(jiǎn)單，我們?cè)趯?shí)際使用Base編碼時(shí)，常會(huì)發(fā)現(xiàn)有第65個(gè)字符的存在，那就是 '=' 符號(hào)，這個(gè)等于號(hào)就是針對(duì)這種特殊情況的一種處理方式。

對(duì)于不足3個(gè)字節(jié)的地方，實(shí)際都會(huì)在后面補(bǔ)0，直到有24個(gè)二進(jìn)制位為止。

但要注意的是，在計(jì)算字節(jié)數(shù)時(shí)，會(huì)直接使用總長(zhǎng)度除以3，如果余數(shù)為1則會(huì)直接在最后補(bǔ)一個(gè)=，如果余數(shù)為2則補(bǔ)兩個(gè)=。

因此，轉(zhuǎn)碼后的字符串需要補(bǔ)的后綴等號(hào)，要么是1個(gè)，要么是2個(gè)，具體的可以見下圖：

圖中第二個(gè)，使用的是單獨(dú)的字符 'd'，是為了區(qū)分索引字符表里的索引0，這個(gè)時(shí)候，得到編碼中，會(huì)存在一個(gè)索引0對(duì)應(yīng)的A字符，而'='是直接補(bǔ)上2個(gè)。

非ASCII碼字符

由于 Base64 僅可對(duì) ASCII 字符進(jìn)行編碼，如果是中文字符等非ASCII碼，就需要先將中文字符轉(zhuǎn)換為ASCII字符后，再進(jìn)行編碼才行。

編解碼方法

btoa 和 atob

JavaScript提供了兩個(gè)原生方法，用來(lái)處理Base64編碼：btoa() 和 atob()。

• btoa()： 將字符串或二進(jìn)制值轉(zhuǎn)換成Base64編碼字符串。
• atob()： 對(duì)base64 編碼的字符串進(jìn)行解碼。

btoa("you") // "eW91"atob("eW91") // "you"

注意：

btoa方法只能直接處理ASCII碼的字符，對(duì)于非ASCII碼的字符，則會(huì)報(bào)錯(cuò)。

atob方法如果傳入字符串參數(shù)不是有效的Base64編碼(如非ASCII碼字符)，或者其長(zhǎng)度不是4的倍數(shù)，會(huì)報(bào)錯(cuò)。

btoa("中") // Uncaught DOMException: The string to be encoded contains characters outside of the Latin1 range.atob("y") // Uncaught DOMException: The string to be decoded is not correctly encoded.

處理中文字符

由于btoa、atob 僅支持對(duì)ASCII字符編碼，也就是單字節(jié)字符，而我們平時(shí)的中文都是 2-4 字節(jié)的字符。

因此，可以先將中文字符轉(zhuǎn)為 utf-8 的編碼，將utf-8編碼當(dāng)做字符，這樣就可以對(duì)多個(gè)單字節(jié)字符進(jìn)行編碼。

對(duì)于中文可以使用這兩個(gè)方法： encodeURIComponent() 和 decodeURIComponent()。

• encodeURIComponent()：將非ACSII碼的字符進(jìn)行utf-8編碼
• decodeURIComponent()：解碼使用

如下，編解碼中文的方式：

window.btoa(encodeURIComponent("中國(guó)"))// "JUU0JUI4JUFEJUU1JTlCJUJE"decodeURIComponent(window.atob("JUU0JUI4JUFEJUU1JTlCJUJE"))// "中國(guó)"

第三方庫(kù)

js-base64

前端常見應(yīng)用

接下來(lái)，我們了解下前端開發(fā)中常見的對(duì)Base64編碼的一些使用場(chǎng)景。 Base64在前端方面的應(yīng)用，多數(shù)都是針對(duì)圖片的處理，一般都是基于DataURL的方式來(lái)使用。

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

小圖片轉(zhuǎn)碼

即開篇說(shuō)的針對(duì)圖片優(yōu)化，使用Base64能減少請(qǐng)求數(shù)的，可以在img標(biāo)簽下，或者css中：

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==">

.icon {  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==);}

當(dāng)我們使用vue或react框架時(shí)，也可以通過(guò)url-loader來(lái)配置，圖標(biāo)轉(zhuǎn)Base64的大?。?/p>

  .loader("url-loader")  .tap(options => {    options.limit = 10240 // 10kb    return options  })

文件讀取

Web環(huán)境下，有提供 FileReader 的API，用來(lái)讀取文件的數(shù)據(jù)，可以通過(guò)它的 readAsDataURL() 方法，將文件數(shù)據(jù)讀取為Base64編碼的字符串?dāng)?shù)據(jù)：

  let reader = new FileReader()  reader.onload = () => {    let base64Img = reader.result  };  reader.readAsDataURL(file)

該方法常用在圖片上傳中。

Canvas生成圖片

Canvas本質(zhì)上是一個(gè)位圖圖像，它有提供 toDataURL() 方法，將畫布導(dǎo)出生成為一張圖片，該圖片將以Base64編碼的格式進(jìn)行保存。

const dataUrl = canvasEl.toDataURL()// data:image/png;base64,PHN2ZyB4bWxucz0iaHR0c......

其他

除處理圖片展示外，還會(huì)在特殊數(shù)據(jù)傳輸、簡(jiǎn)單編碼和加密、代碼混淆、部分證書中，見到Base64編碼字符串。

總結(jié)

最后再來(lái)總結(jié)一下Base64的特點(diǎn)：

• 將二進(jìn)制數(shù)據(jù)轉(zhuǎn)為字符串(ASCII碼)，方便數(shù)據(jù)傳輸。
• 瀏覽器能直接展示Base64編碼圖片，減少請(qǐng)求。
• 編碼后數(shù)據(jù)會(huì)大至少三分之一，需要額外的方法處理編解碼。

到此這篇關(guān)于深入理解JavaScript中的Base64編碼字符串的文章就介紹到這了,更多相關(guān)JavaScript Base64編碼字符串內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！