JS 中關於 base64 的一些事

介紹

base64實際上是一種編碼轉換方式, 將ASCII字符轉換成普通文本, 是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一。

base64由字母a-z、A-Z、0-9以及+和/, 再加上做爲墊字的=, 一共65字符組成一個基本字符集, 其餘全部字符均可以根據必定規則, 轉換成該字符集中的字符。

abcde => YWJjZGU= ABCDE => QUJDREU=

在平常開發中, 最多見的即是將blob和base64之間相互轉換.

// blob to base64
function blobTobase64(blob) {
    const fileReader = new FileReader()
	let base64 = ''
	fileReader.onload = () => {
  		base64 = fileReader.result // 讀取base64
	}
	fileReader.readAsDataURL(blob) // 讀取blob
}
// base64 to blob
function dataURItoBlob(dataURI) {
  var mimeString = dataURI
    .split(',')[0]
    .split(':')[1]
    .split(';')[0] // mime類型
  var byteString = atob(dataURI.split(',')[1]) //base64 解碼
  var arrayBuffer = new ArrayBuffer(byteString.length) //建立ArrayBuffer
  var intArray = new Uint8Array(arrayBuffer) //建立視圖
  for (var i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], { type: mimeString }) // 轉成 blob
}
複製代碼

編碼和解碼

瀏覽器

最新的瀏覽器自帶了兩個方法用於base64的編碼和解碼

分別是atob和btoa

• atob：將base64轉成8bit字節碼
• btoa：將8bit字節碼轉成base64

對於舊版瀏覽器, 可使用js-base64

Node

目前node中還不支持使用atob和btoa，可是能夠經過Buffer來實現, 參考文檔

if (typeof btoa === 'undefined') {
  global.btoa = function (str) {
    return Buffer.from(str).toString('base64');
  };
}

if (typeof atob === 'undefined') {
  global.atob = function (b64Encoded) {
    return Buffer.frome(b64Encoded, 'base64').toString();
  };
}
複製代碼

轉換方式

base64編碼方式對於中文是不適用的, 由於中文對應多個字節, 所以能夠先使用encodeURIComponent編碼後再進行base64編碼.

源碼

編碼

1. 每三個字節做爲一組，每一個字節8bit, 一共是24個二進制位。

   'ABCD'
   ["ABC", "D"] // 每三字節作一組
   ['01000001010000100100001', '01000100'] // 轉成8bit
   複製代碼

2. 將每組的24個二進制位再細分爲四組，每組有6個二進制位, 此時爲二維數組。

   [['010000', '010100', '001001', '000011'], ['010001', '00']]
   複製代碼

   • 二個字節的狀況：將這二個字節的一共16個二進制位, 按照上面的規則, 轉成三組, 那麼最後一項只有4位，則在後面加兩個0, 補夠6位, 並在第三步對應位置加上墊字符=。
   • 一個字節的狀況：將這一個字節的8個二進制位，按照上面的規則轉成二組, 那麼最後一項只有2位, 則在後面加上四個0, 並在第三步對應位置加上兩個墊字符=。
   • 簡單說就是, 缺多少位就在後面補多少個0, 直到滿6位。

     [['010000', '010100', '001001', '000011'], ['010001', '000000']]
     複製代碼

3. 在每組前面加兩個00，擴展成32個二進制位，即四個字節。

規則是這麼說, 但這一步我以爲能夠忽略, 由於00101010和101010 是同樣的

4. 將每組對應的二進制轉成十進制, 在base64char字符集中找到對應的字符。

   [["Q", "U", "J", "D"], ["R", "A"]]
   複製代碼

   • 每一組都最終都應該轉成四個字符

   • 若是不足四個字符, 說明明文中並不足3字節, 所以須要補上墊字符=, 補夠四個字符

   [["Q", "U", "J", "D"], ["R", "A", "=", "="]]
   複製代碼

5. 將最後的結果鏈接成字符串, 則爲最終編碼結果。

   'ABCD' > 'QUJDRA=='

根據編碼方式來看, 每3個字節將會被編碼成四個字符, 若是不足3個字節, 則補上墊字符=, 缺幾個就補幾個。

btoa('A') // "QQ=="
btoa('AB') // "QUI="
btoa('ABC') // "QUJD"
btoa('ABCD') // "QUJDRA=="
複製代碼

解碼

解碼步驟就是跟編碼步驟反過來

1. 每四個字節分爲一組。
2. 將每組的中除了墊字符=外的字符, 在base64char字符集中找到所在下標。
3. 將十進制下標轉成二進制, 若是不夠6位（必定不會超過6位）, 則在前面補0。
   1. 若是遇到墊字符=, 說明其明文不足3字節, 則根據墊字符=的數量, 在該組最後一項中去掉對應個數的0
   2. 一個墊字符, 則去掉兩個0
   3. 兩個墊字符, 則去掉四個0
4. 將每組中的二進制字符串鏈接，此時字符串長度必定是8的倍數，而後每8位分割成一個字節。
5. 經過String.fromCharCode將二進制轉成字符, 而後拼接
6. 將各個字符鏈接, 爲最終解碼結果。

題外-進制轉換

• parseInt(str, radix): 根據radix能夠將字符串轉成十進制
• initValue.toString(radix): 將initValue轉成其餘進制

// n進制轉十進制
parseInt('1000', 2) // 8
parseInt('1000', 16) // 4096

// 進制間轉換
(10).toString(2) // "1010", 10進制轉2進制
(0xff).toString(2) // "11111111", 16進制轉2進制
複製代碼

參考

原來瀏覽器原生支持JS Base64編碼解碼

Base64筆記