來自：掘金,，作者：云的世界

鏈接：https:///post/6989391487200919566

前言

本文將詳細(xì)的介紹前端 Base64 編碼知識(shí),，探索起源，讓大家對開發(fā)經(jīng)常用到的 Base64 有個(gè)更全面深入的認(rèn)知,。

大綱

• Base64在前端的應(yīng)用
• Base64數(shù)據(jù)編碼起源
• Base64編碼64的含義
• Base64編碼優(yōu)缺點(diǎn)
• 一些計(jì)算機(jī)和前端基礎(chǔ)知識(shí)
• ASCII碼,， Unicode , UTF-8
• Base64編碼和解碼
• 其他的成熟方案

Base64在前端的應(yīng)用

Base64編碼，你一定知道的,，先來看看它在前端的一些常見應(yīng)用：
當(dāng)然絕部分場景都是基于Data URLs[1]

Canvas圖片生成

canvas的 toDataURL[2]可以把canvas的畫布內(nèi)容轉(zhuǎn)base64編碼格式包含圖片展示的 data URI[3]。

你畫我猜，新用戶加入，要獲取當(dāng)前的最新的繪畫界面,，也可以通過Base64格式的消息傳遞,。

文件讀取

FileReader的 readAsDataURL[4]可以把上傳的文件轉(zhuǎn)為base64格式的data URI，比較常見的場景是用戶頭像的剪裁和上傳,。

function readAsDataURL() {
    const fileEl = document.getElementById('inputFile');
    return new Promise((resolve, reject) => {
        const fd = new FileReader();
        fd.readAsDataURL(fileEl.files[0]);
        fd.onload = function () {
            resolve(fd.result);
            // data:image/png;base64,iVBORw0KGgoAAAA.......
        }
        fd.onerror = reject;
    });
}

jwt

jwt由header, payload,signature三部分組成，前兩個(gè)解碼后，都是可以明文看見的,。拿 國服最強(qiáng)JWT生成Token做登錄校驗(yàn)講解，看完保證你學(xué)會(huì),！[5] 里面的token做測試,。

網(wǎng)站圖片和小圖片

移動(dòng)端網(wǎng)站圖標(biāo)優(yōu)化

至于怎么獲得這個(gè)值data:,的：

<canvas height='0' width='0' id='canvas'></canvas>
<script>
    const canvasEl = document.getElementById('canvas');
    const ctx = canvasEl.getContext('2d');
    dataUrl = canvasEl.toDataURL();
    console.log(dataUrl);  // data:,
</script>

小圖片

這個(gè)就有很多場景了,，比如img標(biāo)簽，背景圖等

img標(biāo)簽：

css背景圖：

.bg{
    background: url(data:image/png;base64,iVBORw0KGgoAAAA.......)
}

簡單的數(shù)據(jù)加密

當(dāng)然這不是好方法,，但是至少讓你不好解讀,。

SourceMap

借用阮大神的一段代碼, 注意mappings字段，這實(shí)際上就是bas64編碼格式的內(nèi)容,，當(dāng)然你直接去解,，是會(huì)失敗的。

{
    version : 3,
    file: 'out.js',
    sourceRoot : '',
    sources: ['foo.js', 'bar.js'],
    names: ['src', 'maps', 'are', 'fun'],
    mappings: 'AAgBC,SAAQ,CAAEA'
  }

具體的實(shí)現(xiàn)請看官方的base64-vlq.js[6]文件,。

混淆加密代碼

著名的代碼混淆庫,， javascript-obfuscator[7]，其也是有應(yīng)用base64幾碼的,，一起看看選項(xiàng)：
webpack-obfuscator[8]也是基于其封裝的,。

其他

X.509公鑰證書， github SSH key,， mht文件,，郵件附件等等，都有Base64的影子,。

Base64數(shù)據(jù)編碼起源

早期郵件傳輸協(xié)議基于 ASCII 文本,，對于諸如圖片、視頻等二進(jìn)制文件處理并不好,。ASCII 主要用于顯示現(xiàn)代英文,，到目前為止只定義了 128 個(gè)字符，包含控制字符和可顯示字符,。為了解決上述問題,，Base64 編碼順勢而生。

Base64是編解碼,，主要的作用不在于安全性,，而在于讓內(nèi)容能在各個(gè)網(wǎng)關(guān)間無錯(cuò)的傳輸，這才是Base64編碼的核心作用,。

除了Base64數(shù)據(jù)編碼,，其實(shí)還有Base32數(shù)據(jù)編碼, Base16數(shù)據(jù)編碼，可以參見 RFC 4648[9],。

Base64編碼64的含義

64就是64個(gè)字符的意思,。

base64對照表， 借用 Base64原理[10]的一張圖：

1. A-Z 26
2. a-z 26
3. 0-9 10
4. + / 2

26 + 26 + 10 + 2 = 64

當(dāng)然還有一個(gè)字符=,，這是填充字符,，后面會(huì)提到，不屬于64里面的范疇。

對照表的索引值,，注意一下,，后面的base64編碼和解碼會(huì)用到。

Base64編碼優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1. 可以將二進(jìn)制數(shù)據(jù)（比如圖片）轉(zhuǎn)化為可打印字符,，方便傳輸數(shù)據(jù)
2. 對數(shù)據(jù)進(jìn)行簡單的加密,，肉眼是安全的
3. 如果是在html或者css處理圖片，可以減少http請求

缺點(diǎn)

1. 內(nèi)容編碼后體積變大,， 至少1/3
   因?yàn)槭侨止?jié)變成四個(gè)字節(jié),，當(dāng)只有一個(gè)字節(jié)的時(shí)候，也至少會(huì)變成三個(gè)字節(jié),。
2. 編碼和解碼需要額外工作量

說完優(yōu)缺點(diǎn),，回到正題：

我們今天的重點(diǎn)是 uf8編碼轉(zhuǎn)Base64編碼：

基本流程

char => 碼點(diǎn) => utf-8編碼 => base64編碼

在之前要解一下編碼的知識(shí), 了解編碼知識(shí)，又要先了解一些計(jì)算機(jī)的基礎(chǔ)知識(shí),。

一些計(jì)算機(jī)和前端基礎(chǔ)知識(shí)

比特和字節(jié)

比特又叫位,。在計(jì)算機(jī)的世界里，信息的表示方式只有 0 和 1, 其可以表示兩種狀態(tài),。
一位二進(jìn)制可以表示兩狀態(tài),， N位可以表示2^N種狀態(tài)。

一個(gè)字節(jié)(Byte)有8位(Bit)

所以一個(gè)字節(jié)可以表示 2^8 = 256種狀態(tài),；

獲得字符的 Unicode碼點(diǎn)

String.prototype.charCodeAt[11] 可以獲取字符的碼點(diǎn),，獲取范圍為0 ~ 65535。這個(gè)地方注意一下,，關(guān)系到后面的utf-8字節(jié)數(shù),。

'a'.charCodeAt(0)  // 97
'中'.charCodeAt(0) // 20013

進(jìn)制表示

1. 0b開頭，可以表示二進(jìn)制

注意0b10000000= 128 ,0b11000000=92,，之后會(huì)用到.

2. 0x開頭,，可以表示16進(jìn)制

0x11111111 // 286331153

0o開頭可以表示8進(jìn)制，就不多說了,，本來不會(huì)涉及,。

進(jìn)制轉(zhuǎn)換

10進(jìn)制轉(zhuǎn)其他進(jìn)制
Number.prototype.toString(radix)[12]可以把十進(jìn)制轉(zhuǎn)為其他進(jìn)制。

其他進(jìn)制轉(zhuǎn)為10進(jìn)制
parseInt(string, radix)[13]可以把其他進(jìn)制,，轉(zhuǎn)為10進(jìn)制,。

parseInt('10000000', 2) // 128
parseInt('10',16) // 16

這里額外提一下一元操作符號(hào)+可以把字符串轉(zhuǎn)為數(shù)字，后面也會(huì)用到,之前提到的0b,0o,0x這里都會(huì)生效,。

位移操作

本文只涉及右移操作，就只講右移,，右移相當(dāng)于除以2,，如果是整數(shù)，簡單說是去低位,，移動(dòng)幾位去掉幾位,，其實(shí)和10進(jìn)制除以10是一樣的,。

64 >> 2 = 16 我們一起看一下過程

0 1 0 0 0 0 0 0       64
-------------------
   0 1 0 0 0 0 | 0 0  16

一元 & 操作和 一元|操作

一元&

當(dāng)兩者皆為1的時(shí)候，值為1,。 本文的作用可用來去高位,， 具體看代碼。
3553 & 36 = 0b110111100001 & 0b111111 = 100001
因?yàn)楦呶蝗笔?，不可能都?,，故均為0, 而低位相當(dāng)于復(fù)制一遍而已。

一元|
當(dāng)任意一個(gè)為1,，就輸出為1. 本文用來填補(bǔ)0,。比如，把3補(bǔ)成8位二進(jìn)制
3 | 256 = 11 | 100000000 = 100000011

100000011.substring(1)是不是就等于8位二進(jìn)制呢00000011

具備了這些基本知識(shí),，我們就開始先了解編碼相關(guān)的知識(shí),。

ASCII碼， Unicode , UTF-8

ASCII碼

ASCII碼第一位始終是0, 那么實(shí)際可以表示的狀態(tài)是 2^7 = 128種狀態(tài),。

ASCII 主要用于顯示現(xiàn)代英文,，到目前為止只定義了 128 個(gè)字符，包含控制字符和可顯示字符,。

• 0~31 之間的ASCII碼常用于控制像打印機(jī)一樣的外圍設(shè)備
• 32~127 之間的ASCII碼表示的符號(hào),，在我們的鍵盤上都可以被找到

完整的 ASCII碼對應(yīng)表，可以參見 基本ASCII碼和擴(kuò)展ASCII碼[14]

接下來是Unicode和UTF-8編碼,，請先記住這個(gè)重要的知識(shí)：

• Unicode: 字符集
• UTF-8: 編碼規(guī)則

Unicode

Unicode 為世界上所有字符都分配了一個(gè)唯一的編號(hào)(碼點(diǎn)),，這個(gè)編號(hào)范圍從 0x000000 到 0x10FFFF (十六進(jìn)制)，有 100 多萬,，每個(gè)字符都有一個(gè)唯一的 Unicode 編號(hào),，這個(gè)編號(hào)一般寫成 16 進(jìn)制，在前面加上 U+,。例如：掘的 Unicode 是U+6398,。

• U+0000到U+FFFF

最前面的65536個(gè)字符位，它的碼點(diǎn)范圍是從0一直到216-1,。所有最常見的字符都放在這里,。

• U+010000一直到U+10FFFF

剩下的字符都放著這里，碼點(diǎn)范圍從U+010000一直到U+10FFFF,。

Unicode有平面的概念,，這里就不拓展了。

Unicode只規(guī)定了每個(gè)字符的碼點(diǎn),，到底用什么樣的字節(jié)序表示這個(gè)碼點(diǎn),，就涉及到編碼方法。

UTF-8

UTF-8 是互聯(lián)網(wǎng)使用最多的一種 Unicode 的實(shí)現(xiàn)方式。還有 UTF-16（字符用兩個(gè)字節(jié)或四個(gè)字節(jié)表示）和 UTF-32（字符用四個(gè)字節(jié)表示）等實(shí)現(xiàn)方式,。

UTF-8 是它是一種變長的編碼方式, 使用的字節(jié)個(gè)數(shù)從 1 到 4 個(gè)不等,，最新的應(yīng)該不止4個(gè)， 這個(gè)1-4不等,，是后面編碼和解碼的關(guān)鍵,。

UTF-8的編碼規(guī)則：

1. 對于只有一個(gè)字節(jié)的符號(hào)，字節(jié)的第一位設(shè)為0,，后面 7 位為這個(gè)符號(hào)的 Unicode 碼,。此時(shí)，對于英語字母UTF-8 編碼和 ASCII 碼是相同的,。
2. 對于 n 字節(jié)的符號(hào)（n > 1）,，第一個(gè)字節(jié)的前 n 位都設(shè)為 1，第 n + 1 位設(shè)為0,，后面字節(jié)的前兩位一律設(shè)為 10,。剩下的沒有提及的二進(jìn)制位，全部為這個(gè)符號(hào)的 Unicode 碼,，如下表所示：

我們可能沒見過字節(jié)數(shù)為2或者為4的字符,， 字節(jié)數(shù)為2的可以去Unicode對應(yīng)表[15]這里找，而等于4的可以去這看看Unicode? 13.0 Versioned Charts Index[16]

下面這些碼點(diǎn)都處于0000 0080 ~ 0000 07FF, utf-8編碼需要2個(gè)字節(jié)

下面這些碼點(diǎn)都處于0001 0000 ~ 0010 FFFF, utf-8編碼需要4個(gè)字節(jié)

可能這里光說不好理解,，我們分別以英文字符a和中文字符掘來講解一下：

為了驗(yàn)證結(jié)果,，可以去 Convert UTF8 to Binary Bits - Online UTF8 Tools[17]

英文字符a

1. 先獲得其碼點(diǎn)，'a'.charCodeAt(0) 等于 97
2. 對照表格,， 0~127, 需1個(gè)字節(jié)
3. 97..toString(2) 得到編碼 1100001
4. 根據(jù)格式0xxxxxxx進(jìn)行填充,， 最終結(jié)果

01100001

中文字符掘

1. 先獲得其碼點(diǎn)，'掘'.charCodeAt(0) 等于 25496
2. 對照表格,，2048 ~ 65535 需3個(gè)字節(jié)
3. 25496..toString(2) 得到編碼 110 001110 011000
4. 根絕格式1110xxxx 10xxxxxx 10xxxxxx進(jìn)行填充, 最終結(jié)果如下

Convert UTF8 to Binary Bits - Online UTF8 Tools[18]執(zhí)行結(jié)果：完全匹配

抽象把字符轉(zhuǎn)為utf8格式二進(jìn)制的方法

基于上面的表格和轉(zhuǎn)換過程,，我們抽象一個(gè)方法，這個(gè)方法在之后的Base64編碼和解碼至關(guān)重要：

先看看功能,，覆蓋utf8編碼1-3字節(jié)范圍

console.log(to_binary('A'))  // 11100001
console.log(to_binary('?'))  // 1101100010110011
console.log(to_binary('掘')) // 111001101000111010011000

方法如下

方法中有三個(gè)地方稍微難理解一點(diǎn),，我們一起來解讀一下：

1. 二字節(jié) (code >> 6) | 0b11000000

其作用是生成高位二進(jìn)制。
我們以實(shí)際的一個(gè)栗子來講解,，以?為例,，其碼點(diǎn)為0x633,在0000 0080 ~ 0000 07FF之間,，占兩個(gè)字節(jié)， 在其二進(jìn)制編碼為11 000110011 ,， 其填充格式如下， 低位要用6位,。

110xxxxx 10xxxxxx

為了方便觀察,，我們把 11 000110011 重新調(diào)整一下 11000 110011。

(code >> 6) 等于 00110011 >> 6,，右移6位,， 直接干掉低6位。為什么是6呢,，因?yàn)榈臀恍枰?位,，右移動(dòng)6位后，剩下的就是用于高位操作的位了,。

2. 二字節(jié) (code & 0b111111) | 0b10000000
   作用,，用于生成低位二進(jìn)制。以?為例,，11000 110011, 填充格式

  110xxxxx 10xxxxxx

(code & 0b111111)這步的操作是為了干掉6位以上的高位,，僅僅保留低6位。一元&符號(hào),，兩邊都是1的時(shí)候才會(huì)是1,，妙啊。

接著進(jìn)行 | 0b10000000, 主要是按照格式10xxxxxx進(jìn)行位數(shù)填補(bǔ), 讓其滿8位,。

 11000 110011
       111111         (code & 0b111111)
 ------------------
       110011  
    10 000000         (code & 0b111111) | 0b10000000
-------------------
    10 110011

Base64編碼和解碼

utf-8轉(zhuǎn)Base64編碼規(guī)則

1. 獲取每個(gè)字符的Unicode碼,，轉(zhuǎn)為utf-8編碼
2. 三個(gè)字節(jié)作為一組，一共是24個(gè)二進(jìn)制位
   字節(jié)數(shù)不能被 3 整除,，用0字節(jié)值在末尾補(bǔ)足
3. 按照6個(gè)比特位一組分組,，前兩位補(bǔ)0,，湊齊8位
4. 計(jì)算每個(gè)分組的數(shù)值
5. 以第4步的值作為索引,，去ASCII碼表找對應(yīng)的值
6. 替換第2步添加字節(jié)數(shù)個(gè)數(shù)的 =
   比如第2添加了2個(gè)字節(jié),，后面是2個(gè)=

以大掘A為例, 我們通過上面的utf8_to_binary方法得到utf8的編碼
11100110 10001110 10011000 11000001, 其字節(jié)數(shù)不能被3整除，后面填補(bǔ)

6位一組分為四組,， 高位補(bǔ)0, 用| 分割一下填補(bǔ)的,。

00 | 111001  => 57 => 5
00 | 101000  => 40 => o
00 | 111010  => 58 => 6
00 | 011000  => 24 => Y

00 | 110000  => 16 => Q
00 | 010000  => 16 => Q
00 | 000000  =>    => =
00 | 000000  =>    => =

結(jié)果是：5o6YQQ==,， 完美。

utf-8轉(zhuǎn)Base64編碼規(guī)則代碼實(shí)現(xiàn)

基于上面的to_binary方法和base64的轉(zhuǎn)換規(guī)則,，就很簡單啦：
先看看執(zhí)行效果，very good, 和 base64.us[19] 結(jié)果完全一致,。

完整代碼如下：

const BASE64_CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
function utf8_to_base64(str: string) {
  let binaryStr = to_binary(str);
  const len = binaryStr.length;

  // 需要填補(bǔ)的=的數(shù)量
  let paddingCharLen = len % 24 !== 0 ? (24 - len % 24) / 8 : 0;

  //6個(gè)一組
  const groups = [];
  for (let i = 0; i < binaryStr.length; i += 6) {
    let g = binaryStr.slice(i, i + 6);
    if (g.length < 6) {
      g = g.padEnd(6, '0');
    }
    groups.push(g);
  }

  // 求值
  let base64Str = groups.reduce((b64str, cur) => {
    b64str += BASE64_CHARTS[+`0b${cur}`]
    return b64str
  }, '');

  // 填充=
  if (paddingCharLen > 0) {
    base64Str += paddingCharLen > 1 ? '==' : '=';
  }

  return base64Str;
}

至于解碼,，是其逆過程,，留給大家去實(shí)現(xiàn)吧,。

其他的成熟方案

1. 當(dāng)然是基于已有的 btoa和atob,

但是 unescape是不被推薦使用的方法

// Usage: utf8_to_b64('? à la mode'); // '4pyTIMOgIGxhIG1vZGU=' b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // '? à la mode'

2. MDN的 rewriting `atob()` and `btoa()` using `TypedArray`s and UTF-8[20]

其支持到6字節(jié),，但是可讀性并不好,。

3. 第三方庫 base64-js[21] 與 js-base64[22]都是周下載量過百萬的庫,。

雖然有那么多成熟的，但是我們理解和自己實(shí)現(xiàn),，才能更明白Base64的編碼原理,。

額外補(bǔ)充一點(diǎn)

1. 編碼關(guān)系圖

借用[你真的了解 Unicode 和 UTF-8 嗎,？[23]]一張圖：

2. DOMString[24] 是utf-16編碼

引用

Version-Specific Charts[25]
Unicode13.0.0[26]
Unicode? 13.0 Versioned Charts Index[27]
RFC 4648 | The Base16, Base32, and Base64 Data Encodings[28]
Base64 encoding and decoding[29]
字符編碼筆記：ASCII，Unicode 和 UTF-8[30]
Unicode與JavaScript詳解[31]
Base64 編碼入門教程[32] Base64原理[33]
詳解base64原理[34]
一文讀懂base64編碼[35]
JS 中關(guān)于 base64 的一些事[36]
Base64 的原理、實(shí)現(xiàn)及應(yīng)用[37]
圖片與Base64換算關(guān)系[38]
[你真的了解 Unicode 和 UTF-8 嗎,？[39]]
Unicode中UTF-8與UTF-16編碼詳解[40]
Unicode對應(yīng)表[41]
JavaScript Source Map 詳解[42]