认识Base64，看这篇足够了

Base64的简介

Base64是常见的用于传输8Bit字节码的编码方式之一，基于64个可打印字符来标识二进制数据点方法。

使用Base64的编码不可读，需要解码。

Base64实现方式

Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。如果剩下的字符不足3个字节，则用0填充，输出字符使用=，因此编码后输出的文本末尾可能会出现1个或2个=。

Base64就是包括小写字母a-z，大写字母A-Z，数字0-9，符号+和/组成的64个字符的字符集，另外包括填充字符=。任何符号都可以转换成这个字符集中的字符，这个转化过程就叫做Base64编码。

为了保证输出的编码位可读字符，Base64指定了一个编码表，以便进行统一转换，编码表的大小为2^6=64，即Base64名称的由来。

索引	对应字符	索引	对应字符	索引	对应字符	索引	对应字符
0	A	17	R	34	i	51	z
1	B	18	S	35	j	52	0
2	C	19	T	36	k	53	1
3	D	20	U	37	l	54	2
4	E	21	V	38	m	55	3
5	F	22	W	39	n	56	4
6	G	23	X	40	o	57	5
7	H	24	Y	41	p	58	6
8	I	25	Z	42	q	59	7
9	J	26	a	43	r	60	8
10	K	27	b	44	s	61	9
11	L	28	c	45	t	62	+
12	M	29	d	46	u	63	/
13	N	30	e	47	v
14	O	31	f	48	w
15	P	32	g	49	x
16	Q	33	h	50	y

十进制转二进制

十进制数转换为二进制数时，由于整数和小数的转换方法不同，所以先将十进制数的整数部分和小数部分分别转换后，再加以合并。

十进制整数转换为二进制整数采用 "除 2 取余，逆序排列" 法。

具体做法是：用 2 整除十进制整数，可以得到一个商和余数；再用 2 去除商，又会得到一个商和余数，如此进行，直到商为小于 1 时为止，然后把先得到的余数作为二进制数的低位有效位，后得到的余数作为二进制数的高位有效位，依次排列起来。

示例：求十进制34对应的二进制数

Base64编码示例

示例1：对字符串 Son 进行 Base64编码

ASCII字符	S（大写）	o	n
十进制	83	111	110
二进制	01010011	01101111	01101110
每6个bit为一组	010100	110110	111101	101110
高位补0	00010100	00110110	00111101	00101110
对应的Base64索引	20	54	61	46
对应的Base64字符	U	2	9	u

Son通过Base64编码转换成了U29u，3个ASCII字符刚好转换成对应的Base64字符。

示例2：对字符串 S 进行 Base64编码

ASCII字符	S（大写）
十进制	83
二进制	01010011
每6个bit为一组	010100	110000	000000	000000
高位补0	00010100	00110000	00000000	00000000
对应的Base64索引	20	48
对应的Base64字符	U	w	=	=

字符串S对应1个字节，一共8位，按6位为一组分为4组，每组不足6位的补0，然后在每组的高位补0，找到Base64编码进行转换。

Base64的优缺点

优点：

将二进制数据（如图片）转为可打印字符，在HTTP协议下传输
对数据进行简单加密，肉眼安全
如果是在html或css中处理图片，可以减少http请求

缺点：

内容编码后体积变大，至少1/3
编码和解码需要额外工作量

Base64编码和解码

btoa和atob方法：js中有两个函数被分别用来处理编码和解码Base64字符串
- btoa()：该函数基于二进制数据字符串创建一个Base64编码的字符串
- atob()：该函数用于解码使用Base64编码的字符串

btoa()示例：

let btoaStr = window.btoa(123456)
console.log(btoaStr) // MTIzNDU2

atob()示例：

let atobStr = window.atob(btoaStr)
console.log(atobStr) // 123456

这两个函数容易混淆，可以这样记下，比如btoa是以b字母开头，编码也是以b字母开头。即btoa编码，升序的atob解码。

第三方库
- js-base64
- base64-js

Data URI Scheme

Data URI scheme的目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，减少请求资源的连接数，缺点是不会被浏览器缓存起来。

Data URI scheme支持的Base64编码的类型比如：

data:image/png;base64,base64编码的png图片数据
data:image/gif;base64,base64编码的gif图片数据
data:text/javascript;base64,base64编码的javascript代码

Base64的应用

使用Base64编码资源文件

比如：在html文档中渲染一张Base64的图片

<img :src="data:image/png;base64,IVBORsssssfjsfsfs==" alt=""></img>

注意：如果图片较大，在Base64编码后字符串会非常大，影响页面加载进度，这种情况不适合Base64编码。

在HTTP中传递较长的标识信息

比如使用Base64将一个较长的标识符（128bit的UUID）编码为一个字符串，用作表单和http的GET请求中的参数。

标准的Base64编码后不适合直接放在请求的URL中传输，因为URL编码器会把Base64中的/和+变成乱码，即%xxx的形式。我们可以将base64编码改进一下用于URL中，比如Base64中的/和+转换成_和-等字符，避免URL编码器的转换。

canvas生成图片

canvas提供了toDataURL()和toBlob()方法。

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的data URI。可以使用 type 参数其类型，默认为PNG格式。图片的分辨率为 96dpi。

canvas.toDataURL(type, encoderOptions);

使用示例：设置jpeg图片的质量，图片将以Base64存储

let quality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地（由用户代理自行决定）。

HTMLCanvasElement.toBlob(callback, type?, quality?)

使用示例：

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

读取文件

FileReader.readAsDataURL()方法会读取指定的Blob或File对象。读取操作完成的时候，readyState会变成已完成DONE，并触发 loadEnd事件，同时result属性将包含一个data:URL 格式的字符串（Base64 编码）以表示所读取文件的内容。

读取文件示例：

代码演示可以点击这里查看哦

<input type="file" onchange="previewFile()" />
<br />
<br />
<img src="" alt="导入图片进行预览" />
<script>
  function previewFile() {
    var preview = document.querySelector("img");
    var file = document.querySelector("input[type=file]").files[0];
    var reader = new FileReader();

    reader.addEventListener("load",
      function () {
        preview.src = reader.result;
        console.log(reader.result); // Base64编码的图片格式
      },
      false,
    );

    if (file) {
      reader.readAsDataURL(file);
    }
  }
</script>

简单"加密"某些数据

Base64常用作一个简单的“加密”来保护某些数据，比如个人密码我们如果不使用其他加密算法的话，可以使用Base64来简单处理。

Base64是加密算法吗

Base64不是加密算法，只是一种编码方式，可以用Base64来简单的“加密”来保护某些数据。

结语

❤️ 🧡 💛大家喜欢我写的文章的话，欢迎大家点点关注、点赞、收藏和转载！！

欢迎关注公众号前端开心果 🔥我会持续更新前端相关的内容文章哦。

认识Base64，看这篇足够了

Base64的简介

Base64实现方式

十进制转二进制

Base64编码示例

Base64的优缺点

Base64编码和解码

Data URI Scheme

Base64的应用

使用Base64编码资源文件

在HTTP中传递较长的标识信息

canvas生成图片

读取文件

简单"加密"某些数据

Base64是加密算法吗

结语

风如也

引用和评论

服务器发送事件Server-sent events详解与示例

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

索引	对应字符	索引	对应字符	索引	对应字符	索引	对应字符
0	A	17	R	34	i	51	z
1	B	18	S	35	j	52	0
2	C	19	T	36	k	53	1
3	D	20	U	37	l	54	2
4	E	21	V	38	m	55	3
5	F	22	W	39	n	56	4
6	G	23	X	40	o	57	5
7	H	24	Y	41	p	58	6
8	I	25	Z	42	q	59	7
9	J	26	a	43	r	60	8
10	K	27	b	44	s	61	9
11	L	28	c	45	t	62	+
12	M	29	d	46	u	63	/
13	N	30	e	47	v
14	O	31	f	48	w
15	P	32	g	49	x
16	Q	33	h	50	y

索引	对应字符	索引	对应字符	索引	对应字符	索引	对应字符
0	A	17	R	34	i	51	z
1	B	18	S	35	j	52	0
2	C	19	T	36	k	53	1
3	D	20	U	37	l	54	2
4	E	21	V	38	m	55	3
5	F	22	W	39	n	56	4
6	G	23	X	40	o	57	5
7	H	24	Y	41	p	58	6
8	I	25	Z	42	q	59	7
9	J	26	a	43	r	60	8
10	K	27	b	44	s	61	9
11	L	28	c	45	t	62	+
12	M	29	d	46	u	63	/
13	N	30	e	47	v
14	O	31	f	48	w
15	P	32	g	49	x
16	Q	33	h	50	y

索引	对应字符	索引	对应字符	索引	对应字符	索引	对应字符
0	A	17	R	34	i	51	z
1	B	18	S	35	j	52	0
2	C	19	T	36	k	53	1
3	D	20	U	37	l	54	2
4	E	21	V	38	m	55	3
5	F	22	W	39	n	56	4
6	G	23	X	40	o	57	5
7	H	24	Y	41	p	58	6
8	I	25	Z	42	q	59	7
9	J	26	a	43	r	60	8
10	K	27	b	44	s	61	9
11	L	28	c	45	t	62	+
12	M	29	d	46	u	63	/
13	N	30	e	47	v
14	O	31	f	48	w
15	P	32	g	49	x
16	Q	33	h	50	y