JavaScript中关于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 的编码和解码

分别是 at

ob 和 btoa

• atob：将 base64 转成 8bit 字节码
• btoa：将 8bit 字节码转成 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']]

• 二个字节的情况：将这二个字节的一共16个二进制位, 按照上面的规则, 转成三组, 那么最后一项只有4位，则在后面加两个0, 补够6位, 并在第三步对应位置加上垫字符 = 。
• 一个字节的情况：将这一个字节的8个二进制位，按照上面的规则转成二组, 那么最后一项只有2位, 则在后面加上四个0, 并在第三步对应位置加上两个垫字符 = 。
  
• 简单说就是, 缺多少位就在后面补多少个0, 直到满6位。
  

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

在每组前面加两个00，扩展成32个二进制位，即四个字节。

规则是这么说, 但这一步我觉得可以忽略, 因为 00101010 和 101010 是一样的

将每组对应的二进制转成十进制, 在 base64char 字符集中找到对应的字符。

[["q", "u", "j", "d"], ["r", "a"]]

每一组都最终都应该转成四个字符

如果不足四个字符, 说明明文中并不足3字节, 因此需要补上垫字符 = , 补够四个字符

[["q", "u", "j", "d"], ["r", "a", "=", "="]]

将最后的结果连接成字符串, 则为最终编码结果。

'abcd' > 'qujdra=='

根据编码方式来看, 每3个字节将会被编码成四个字符, 如果不足3个字节, 则补上垫字符 = , 缺几个就补几个。

btoa('a') // "qq=="
btoa('ab') // "qui="
btoa('abc') // "qujd"
btoa('abcd') // "qujdra=="

解码

解码步骤就是跟编码步骤反过来

1. 每四个字节分为一组。
2. 将每组的中除了垫字符 = 外的字符, 在 base64char 字符集中找到所在下标。
3. 将十进制下标转成二进制, 如果不够6位（一定不会超过6位）, 则在前面补 0 。
   

• 如果遇到垫字符 = , 说明其明文不足3字节, 则根据垫字符 = 的数量, 在该组最后一项中去掉对应个数的 0
• 一个垫字符, 则去掉两个 0
• 两个垫字符, 则去掉四个 0
  

1. 将每组中的二进制字符串连接，此时字符串长度一定是8的倍数，然后每8位分割成一个字节。
2. 通过 string.fromcharcode 将二进制转成字符, 然后拼接
3. 将各个字符连接, 为最终解码结果。

题外-进制转换

• 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进制

总结

 以上所述是小编给大家介绍的javascript中关于base64的一些事