这篇文章主要介绍了JavaScript中base64的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司2013年至今,先为天元等服务建站,天元等地企业,进行企业商务咨询服务。为天元企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。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
对于旧版浏览器, 可以使用 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']]
二个字节的情况:将这二个字节的一共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的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
本文标题:JavaScript中base64的示例分析-创新互联
网页链接:/article16/cdihdg.html
成都网站建设公司_创新互联,为您提供外贸建站、虚拟主机、网页设计公司、建站公司、做网站、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联