JavaScript中关于base64的一些事

base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。

base64 由字母 a-z 、 A-Z 、 0-9 以及 + 和 / , 再加上作为垫字的 = , 一共65字符组成一个基本字符集, 其他所有字符都可以根据一定规则, 转换成该字符集中的字符。

abcde => YWJjZGU= ABCDE => QUJDREU=

在日常开发中, 最常见的便是将 blob 和 base64 之间相互转换.

// blob to base64function blobTobase64(blob) { const fileReader = new FileReader() let base64 = '' fileReader.onload = () => { base64 = fileReader.result // 读取base64 } fileReader.readAsDataURL(blob) // 读取blob}// base64 to blobfunction 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 的编码和解码

分别是 at

ob 和 btoa

对于旧版浏览器, 可以使用 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 编码.

源码

编码

每三个字节作为一组，每个字节8bit, 一共是24个二进制位。

'ABCD'["ABC", "D"] // 每三字节做一组['01000001010000100100001', '01000100'] // 转成8bit

将每组的24个二进制位再细分为四组，每组有6个二进制位, 此时为二维数组。

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