base64 其實(shí)是一種編碼轉(zhuǎn)換方式, 將 ASCII 字符轉(zhuǎn)換成普通文本, 是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一。

base64 由字母 a-z 、 A-Z 、 0-9 以及 + 和 / , 再加上作為墊字的 = , 一共65字符組成一個(gè)基本字符集, 其他所有字符都可以根據(jù)一定規(guī)則, 轉(zhuǎn)換成該字符集中的字符。

abcde => YWJjZGU= ABCDE => QUJDREU=

在日常開發(fā)中, 最常見的便是將 blob 和 base64 之間相互轉(zhuǎn)換.

// 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) //創(chuàng)建ArrayBuffer
 var intArray = new Uint8Array(arrayBuffer) //創(chuàng)建視圖
 for (var i = 0; i < byteString.length; i++) {
 intArray[i] = byteString.charCodeAt(i)
 }
 return new Blob([intArray], { type: mimeString }) // 轉(zhuǎn)成 blob
}

編碼和解碼

瀏覽器

最新的瀏覽器自帶了兩個(gè)方法用于 base64 的編碼和解碼

分別是 at

ob 和 btoa

• atob：將 base64 轉(zhuǎn)成 8bit 字節(jié)碼
• btoa：將 8bit 字節(jié)碼轉(zhuǎn)成 base64

對(duì)于舊版瀏覽器, 可以使用 js-base64

Node

目前 node 中還不支持使用 atob 和 btoa ，但是可以通過 Buffer 來實(shí)現(xiàn),參考文檔

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();
 };
}

轉(zhuǎn)換方式

base64編碼方式對(duì)于中文是不適用的, 因?yàn)橹形膶?duì)應(yīng)多個(gè)字節(jié), 因此可以先使用 encodeURIComponent 編碼后再進(jìn)行 base64 編碼.

源碼

編碼

每三個(gè)字節(jié)作為一組，每個(gè)字節(jié)8bit, 一共是24個(gè)二進(jìn)制位。

'ABCD'
["ABC", "D"] // 每三字節(jié)做一組
['01000001010000100100001', '01000100'] // 轉(zhuǎn)成8bit

將每組的24個(gè)二進(jìn)制位再細(xì)分為四組，每組有6個(gè)二進(jìn)制位, 此時(shí)為二維數(shù)組。

[['010000', '010100', '001001', '000011'], ['010001', '00']]

• 二個(gè)字節(jié)的情況：將這二個(gè)字節(jié)的一共16個(gè)二進(jìn)制位, 按照上面的規(guī)則, 轉(zhuǎn)成三組, 那么最后一項(xiàng)只有4位，則在后面加兩個(gè)0, 補(bǔ)夠6位, 并在第三步對(duì)應(yīng)位置加上墊字符 = 。
• 一個(gè)字節(jié)的情況：將這一個(gè)字節(jié)的8個(gè)二進(jìn)制位，按照上面的規(guī)則轉(zhuǎn)成二組, 那么最后一項(xiàng)只有2位, 則在后面加上四個(gè)0, 并在第三步對(duì)應(yīng)位置加上兩個(gè)墊字符 = 。
  
• 簡單說就是, 缺多少位就在后面補(bǔ)多少個(gè)0, 直到滿6位。
  

[['010000', '010100', '001001', '000011'], ['010001', '000000']]

在每組前面加兩個(gè)00，擴(kuò)展成32個(gè)二進(jìn)制位，即四個(gè)字節(jié)。

規(guī)則是這么說, 但這一步我覺得可以忽略, 因?yàn)?00101010 和 101010 是一樣的

將每組對(duì)應(yīng)的二進(jìn)制轉(zhuǎn)成十進(jìn)制, 在 base64char 字符集中找到對(duì)應(yīng)的字符。

[["Q", "U", "J", "D"], ["R", "A"]]

每一組都最終都應(yīng)該轉(zhuǎn)成四個(gè)字符

如果不足四個(gè)字符, 說明明文中并不足3字節(jié), 因此需要補(bǔ)上墊字符 = , 補(bǔ)夠四個(gè)字符

[["Q", "U", "J", "D"], ["R", "A", "=", "="]]

將最后的結(jié)果連接成字符串, 則為最終編碼結(jié)果。

'ABCD' > 'QUJDRA=='

根據(jù)編碼方式來看, 每3個(gè)字節(jié)將會(huì)被編碼成四個(gè)字符, 如果不足3個(gè)字節(jié), 則補(bǔ)上墊字符 = , 缺幾個(gè)就補(bǔ)幾個(gè)。

btoa('A') // "QQ=="
btoa('AB') // "QUI="
btoa('ABC') // "QUJD"
btoa('ABCD') // "QUJDRA=="

解碼

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

1. 每四個(gè)字節(jié)分為一組。
2. 將每組的中除了墊字符 = 外的字符, 在 base64char 字符集中找到所在下標(biāo)。
3. 將十進(jìn)制下標(biāo)轉(zhuǎn)成二進(jìn)制, 如果不夠6位（一定不會(huì)超過6位）, 則在前面補(bǔ) 0 。
   

• 如果遇到墊字符 = , 說明其明文不足3字節(jié), 則根據(jù)墊字符 = 的數(shù)量, 在該組最后一項(xiàng)中去掉對(duì)應(yīng)個(gè)數(shù)的 0
• 一個(gè)墊字符, 則去掉兩個(gè) 0
• 兩個(gè)墊字符, 則去掉四個(gè) 0
  

1. 將每組中的二進(jìn)制字符串連接，此時(shí)字符串長度一定是8的倍數(shù)，然后每8位分割成一個(gè)字節(jié)。
2. 通過 String.fromCharCode 將二進(jìn)制轉(zhuǎn)成字符, 然后拼接
3. 將各個(gè)字符連接, 為最終解碼結(jié)果。

題外-進(jìn)制轉(zhuǎn)換

• parseInt(str, radix): 根據(jù)radix可以將字符串轉(zhuǎn)成十進(jìn)制
• initValue.toString(radix): 將initValue轉(zhuǎn)成其他進(jìn)制

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

// 進(jìn)制間轉(zhuǎn)換
(10).toString(2) // "1010", 10進(jìn)制轉(zhuǎn)2進(jìn)制
(0xff).toString(2) // "11111111", 16進(jìn)制轉(zhuǎn)2進(jìn)制

總結(jié)

 以上所述是小編給大家介紹的JavaScript中關(guān)于base64的一些事，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論