从base64到atob和btoa的一些理解

CKJOKER 发布于2019-08-23 11:57 / 3277人阅读

摘要：什么是是网络上最常见的用于传输字节码的编码方式之一，就是一种基于个可打印字符来表示二进制数据的方法。然而直接转换是不行的。一般用于在协议下传输二进制数据。剩下的使用替代。这就是的编码过程。不能用于加密数据，即使使用私有的索引表也是不安全的。

什么是base64

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

为什么会有base64

由于HTTP协议是文本协议，所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。

问：什么是“可打印字符”呢？
答：在ASCII码中规定，0~31、128这33个字符属于控制字符，32~127这95个字符属于可打印字符，也就是说网络传输只能传输这95个字符，不在这个范围内的字符无法传输。

问：那么该怎么才能传输其他字符呢？
答：其中一种方式就是使用Base64。Base64一般用于在HTTP协议下传输二进制数据。

base64实现原理

Base64的索引与对应字符的关系如下表所示：

也就是说，如果将索引转换为对应的二进制数据的话需要至多6个Bit(2^6=64)。然而ASCII码需要8个Bit来表示，那么怎么使用6个Bit来表示8个Bit的数据呢？6个Bit当然不能存储8个Bit的数据，但是4*6个Bit可以存储3*8个Bit的数据啊！

可以看到“Son”通过Base64编码转换成了“U29u”。这是刚刚好的情况，3个ASCII字符刚好转换成对应的4个Base64字符。但是，当需要转换的字符数不是3的倍数的情况下该怎么办呢？Base64规定，当需要转换的字符不是3的倍数时，一律采用补0的方式凑足3的倍数，具体如下表所示：

每6个Bit为一组，第一组转换后为字符“U”，第二组末尾补4个0转换后为字符“w”。剩下的使用“=”替代。即字符“S”通过Base64编码后为“Uw==”。这就是Base64的编码过程。

HTML规范关于base64有哪些API

好了，原理懂了，那么如果要进行base64编码，我们该怎么做呢？自己撸一个方法？找一个库？都行，但是HTML规范中已经规定了base64转换的API，window对象上可以访问到base64编码和解码的方法，直接调用即可。
window.atob() // 对base64编码过的字符串进行解码
window.btoa() // 对ASCII编码的字符串进行base64编码（不支持汉字，汉字可通过URIencode预处理后再编码）

base64有哪些应用场景

前端将较小的icon编码为base64直接在文档中加载，减少http请求

电子邮件传输二进制文件时，通常用base64编码后再传

注意：

base64编码后的数据量是要比编码前大的，所以base64不能用于减少数据量。

base64不能用于加密数据，即使使用私有的索引表也是不安全的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97732.html

Base64 JS编码/解码

摘要：注意点如果所示，上面说到的编码解码方法并不支持中文，因为它们只支持编码。转换编码中文进行转码之后在编码。最优方案在某些情况下，用了上面的方法也会出现中文乱码的情况，如获取到的音乐歌词解析出来的歌词等。为什么要编码简单粗暴的解释就是为了数据的安全性。编码/解码常用方法（仅针对Base64）编码我们一般使用 window.btoa() 对原始数据进行编码。解码我们一般使用 w...

why_rookie 2019-08-23 11:47 评论0 收藏0
数据类型二

摘要：为的值，有可能不是，而是一个字符除了和这几个值会返回，对于其他的数值都会返回无法改变字符串之中的单个字符。属性返回字符串的长度，该属性也是无法改变的。由于对象本身并没有属性，但是运算符会返回，因为这个属性是继承的。 null, undefined null 和 undefined null 是一个表示为空的对象，转为数值时为0；undefined是一个表示此处无定义的原始值，转为数值时...

gclove 2019-08-23 11:57 评论0 收藏0
HTML5 进阶系列：文件上传下载

摘要：前言中提供的文件在前端中有着丰富的应用，上传下载读取内容等在日常的交互中很常见。构造函数中的第一个参数是一个数组，可以存放对象对象对象和字符串。通过构造函数创建一个对象该对象有以下方法中断读取操作。前言 HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本...

learn_shifeng 2019-08-20 17:42 评论0 收藏0
js对文件和二进制操作的一些方法汇总

摘要：最近接手了一个项目接触到一些对文件操作的业务所以在这边整理一下日常用到的处理方式当学习笔记吧有不对的地方欢迎指正哈首先我们来看一下这个万能的对象就如同它的名字一样就是个文件读取器之所以说它是个万能的对象是因为它可以读取任意格式的内容最近我尝最近接手了一个项目,接触到一些对文件操作的业务.所以在这边整理一下日常用到的处理方式,当学习笔记吧,有不对的地方,欢迎指正哈 FileReader...

fjcgreat 2019-08-23 14:55 评论0 收藏0