js中關於base64的一些事

zWing發表於2019-05-05
JS

介紹

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 是一樣的

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

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

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

    • 如果不足四個字元, 說明明文中並不足3位元組, 因此需要補上墊字元=, 補夠四個字元

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

  2. 將最後的結果連線成字串, 則為最終編碼結果。

    '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筆記

相關文章