JavaScript中关于base64的一些事
base64其实是一种编码转换方式,将ASCII字符转换成普通文本,是网络上最常见的用于传输8Bit字节代码的编码方式之一。
base64由字母a-z、A-Z、0-9以及+和/,再加上作为垫字的=,一共65字符组成一个基本字符集,其他所有字符都可以根据一定规则,转换成该字符集中的字符。
abcde=>YWJjZGU=ABCDE=>QUJDREU=
在日常开发中,最常见的便是将blob和base64之间相互转换.
//blobtobase64
functionblobTobase64(blob){
constfileReader=newFileReader()
letbase64=''
fileReader.onload=()=>{
base64=fileReader.result//读取base64
}
fileReader.readAsDataURL(blob)//读取blob
}
//base64toblob
functiondataURItoBlob(dataURI){
varmimeString=dataURI
.split(',')[0]
.split(':')[1]
.split(';')[0]//mime类型
varbyteString=atob(dataURI.split(',')[1])//base64解码
vararrayBuffer=newArrayBuffer(byteString.length)//创建ArrayBuffer
varintArray=newUint8Array(arrayBuffer)//创建视图
for(vari=0;i
编码和解码
浏览器
最新的浏览器自带了两个方法用于base64的编码和解码
分别是at
ob和btoa
- atob：将base64转成8bit字节码
- btoa：将8bit字节码转成base64
对于旧版浏览器,可以使用js-base64
Node
目前node中还不支持使用atob和btoa，但是可以通过Buffer来实现,参考文档
if(typeofbtoa==='undefined'){
global.btoa=function(str){
returnBuffer.from(str).toString('base64');
};
}
if(typeofatob==='undefined'){
global.atob=function(b64Encoded){
returnBuffer.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=="
解码
解码步骤就是跟编码步骤反过来
- 每四个字节分为一组。
- 将每组的中除了垫字符=外的字符,在base64char字符集中找到所在下标。
- 将十进制下标转成二进制,如果不够6位（一定不会超过6位）,则在前面补0。
- 如果遇到垫字符=,说明其明文不足3字节,则根据垫字符=的数量,在该组最后一项中去掉对应个数的0
- 一个垫字符,则去掉两个0
- 两个垫字符,则去掉四个0
- 将每组中的二进制字符串连接，此时字符串长度一定是8的倍数，然后每8位分割成一个字节。
- 通过String.fromCharCode将二进制转成字符,然后拼接
- 将各个字符连接,为最终解码结果。
题外-进制转换
- 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的一些事，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。