JavaScript中關于base64的一些事
base64 其實是一種編碼轉(zhuǎn)換方式, 將 ASCII 字符轉(zhuǎn)換成普通文本, 是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一。
base64 由字母 a-z 、 A-Z 、 0-9 以及 + 和 / , 再加上作為墊字的 = , 一共65字符組成一個基本字符集, 其他所有字符都可以根據(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 }
編碼和解碼
瀏覽器
最新的瀏覽器自帶了兩個方法用于 base64 的編碼和解碼
分別是 at
ob 和 btoa
- atob:將 base64 轉(zhuǎn)成 8bit 字節(jié)碼
- btoa:將 8bit 字節(jié)碼轉(zhuǎn)成 base64
對于舊版瀏覽器, 可以使用 js-base64
Node
目前 node 中還不支持使用 atob 和 btoa ,但是可以通過 Buffer 來實現(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編碼方式對于中文是不適用的, 因為中文對應多個字節(jié), 因此可以先使用 encodeURIComponent 編碼后再進行 base64 編碼.
編碼
每三個字節(jié)作為一組,每個字節(jié)8bit, 一共是24個二進制位。
'ABCD' ["ABC", "D"] // 每三字節(jié)做一組 ['01000001010000100100001', '01000100'] // 轉(zhuǎn)成8bit
將每組的24個二進制位再細分為四組,每組有6個二進制位, 此時為二維數(shù)組。
[['010000', '010100', '001001', '000011'], ['010001', '00']]
- 二個字節(jié)的情況:將這二個字節(jié)的一共16個二進制位, 按照上面的規(guī)則, 轉(zhuǎn)成三組, 那么最后一項只有4位,則在后面加兩個0, 補夠6位, 并在第三步對應位置加上墊字符 = 。
- 一個字節(jié)的情況:將這一個字節(jié)的8個二進制位,按照上面的規(guī)則轉(zhuǎn)成二組, 那么最后一項只有2位, 則在后面加上四個0, 并在第三步對應位置加上兩個墊字符 = 。
- 簡單說就是, 缺多少位就在后面補多少個0, 直到滿6位。
[['010000', '010100', '001001', '000011'], ['010001', '000000']]
在每組前面加兩個00,擴展成32個二進制位,即四個字節(jié)。
規(guī)則是這么說, 但這一步我覺得可以忽略, 因為 00101010 和 101010 是一樣的
將每組對應的二進制轉(zhuǎn)成十進制, 在 base64char 字符集中找到對應的字符。
[["Q", "U", "J", "D"], ["R", "A"]]
每一組都最終都應該轉(zhuǎn)成四個字符
如果不足四個字符, 說明明文中并不足3字節(jié), 因此需要補上墊字符 = , 補夠四個字符
[["Q", "U", "J", "D"], ["R", "A", "=", "="]]
將最后的結(jié)果連接成字符串, 則為最終編碼結(jié)果。
'ABCD' > 'QUJDRA=='
根據(jù)編碼方式來看, 每3個字節(jié)將會被編碼成四個字符, 如果不足3個字節(jié), 則補上墊字符 = , 缺幾個就補幾個。
btoa('A') // "QQ==" btoa('AB') // "QUI=" btoa('ABC') // "QUJD" btoa('ABCD') // "QUJDRA=="
解碼
解碼步驟就是跟編碼步驟反過來
- 每四個字節(jié)分為一組。
- 將每組的中除了墊字符 = 外的字符, 在 base64char 字符集中找到所在下標。
- 將十進制下標轉(zhuǎn)成二進制, 如果不夠6位(一定不會超過6位), 則在前面補 0 。
- 如果遇到墊字符 = , 說明其明文不足3字節(jié), 則根據(jù)墊字符 = 的數(shù)量, 在該組最后一項中去掉對應個數(shù)的 0
- 一個墊字符, 則去掉兩個 0
- 兩個墊字符, 則去掉四個 0
- 將每組中的二進制字符串連接,此時字符串長度一定是8的倍數(shù),然后每8位分割成一個字節(jié)。
- 通過 String.fromCharCode 將二進制轉(zhuǎn)成字符, 然后拼接
- 將各個字符連接, 為最終解碼結(jié)果。
題外-進制轉(zhuǎn)換
- parseInt(str, radix): 根據(jù)radix可以將字符串轉(zhuǎn)成十進制
- initValue.toString(radix): 將initValue轉(zhuǎn)成其他進制
// n進制轉(zhuǎn)十進制 parseInt('1000', 2) // 8 parseInt('1000', 16) // 4096 // 進制間轉(zhuǎn)換 (10).toString(2) // "1010", 10進制轉(zhuǎn)2進制 (0xff).toString(2) // "11111111", 16進制轉(zhuǎn)2進制
總結(jié)
以上所述是小編給大家介紹的JavaScript中關于base64的一些事,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
淺述節(jié)點的創(chuàng)建及常見功能的實現(xiàn)
本文主要對節(jié)點的創(chuàng)建及常見功能的實現(xiàn)方法進行介紹,希望會對大家學習javascript有所幫助,下面就跟小編一起來看下吧2016-12-12DWR實現(xiàn)模擬Google搜索效果實現(xiàn)原理及代碼
本文主要介紹DWR實現(xiàn)模擬Google搜索效果實現(xiàn)原理,感興趣的朋友可以了解下,或許對你的DWR學習有幫助,閑話就不多說了,看代碼了2013-01-01微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹
這篇文章主要介紹了微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹,本文講解了發(fā)送給好友、分享函數(shù)、隱藏工具欄、隱藏三個點按鈕等功能,需要的朋友可以參考下2015-05-05JavaScript鼠標事件監(jiān)聽、觸發(fā)時機和觸發(fā)順序?qū)嵗v解
事件監(jiān)聽是Web開發(fā)中非常重要的一個概念,掌握了它的用法,可以讓我們實現(xiàn)更加豐富和動態(tài)的交互效果,這篇文章主要給大家介紹了關于JavaScript鼠標事件監(jiān)聽、觸發(fā)時機和觸發(fā)順序的相關資料,需要的朋友可以參考下2024-01-01