图片转Base64 - 图片Base64编码在线转换

图片 → Base64

📁 点击选择图片或拖拽图片到此处

Base64 → 图片

粘贴 Base64 或 Data URI

📖 Base64编码完全指南

什么是Base64编码？

Base64是一种基于64个可打印ASCII字符来表示二进制数据的编码方式。它的名字来源于编码所使用的64个字符。Base64最初设计的目的是让二进制数据能够通过只支持文本的传输层（如电子邮件的SMTP协议）进行安全传输。在现代Web开发中，Base64被广泛用于Data URI、JWT令牌、API数据传输等场景。

Base64编码的核心思想是：将每3个字节（共24位）的二进制数据，重新划分为4组，每组6位。由于6位二进制最多能表示2^6=64个不同的值（0-63），因此只需要64个字符就能完整表示所有可能的组合。这64个字符全部是可打印的ASCII字符，确保了数据在任何文本环境中都不会被破坏或误解。

Base64字符编码表（完整64字符）

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

编码算法逐步详解

下面以编码字符串"Hi!"为例，展示完整的Base64编码过程：

第一步：获取ASCII码值
H = 72, i = 105, ! = 33

第二步：转换为8位二进制
H = 01001000, i = 01101001, ! = 00100001

第三步：拼接为24位二进制串
010010000110100100100001

第四步：按每6位分组
010010 | 000110 | 100100 | 100001

第五步：将每组6位转为十进制
18, 6, 36, 33

第六步：查表得到Base64字符
18→S, 6→G, 36→k, 33→h

编码结果："Hi!" → "SGkh"

填充符号 = 的原理

Base64编码要求输入数据长度必须是3的倍数（因为3字节=24位，恰好分为4组6位）。当原始数据长度不是3的倍数时，需要进行填充处理：

余1个字节：该字节8位，补4个0凑成12位，分为2组6位编码，输出2个Base64字符 + 2个等号"=="
余2个字节：共16位，补2个0凑成18位，分为3组6位编码，输出3个Base64字符 + 1个等号"="
恰好3的倍数：无需填充，不添加等号

例如：编码单个字母"A"（ASCII 65 = 01000001），补零后得到010000 010000，查表得到Q和Q，再补两个等号，最终结果为"QQ=="。

Base64的主要应用场景

应用场景	详细说明	实际示例
电子邮件（MIME）	SMTP协议只能传输7位ASCII字符，附件和非ASCII内容必须经过Base64编码后才能传输	Content-Transfer-Encoding: base64
Data URI	将图片、字体等资源直接嵌入HTML/CSS中，减少HTTP请求数量	data:image/png;base64,iVBOR...
URL参数传递	将复杂数据（如JSON）编码后放入URL查询参数中传递	?token=eyJhbGci...
JWT令牌	JSON Web Token的header和payload部分使用Base64URL编码	header.payload.signature
API数据传输	在JSON等纯文本格式中传输二进制数据（如图片、文件内容）	"avatar": "data:image/jpeg;base64,..."
证书与密钥	PEM格式的SSL证书和私钥使用Base64编码存储	-----BEGIN CERTIFICATE-----

标准Base64与URL安全Base64

标准Base64编码中使用的"+"和"/"字符在URL中有特殊含义（"+"会被解释为空格，"/"是路径分隔符），因此产生了URL安全的Base64变体（Base64URL）。两者的区别如下：

特性	标准Base64（RFC 4648 Section 4）	URL安全Base64（RFC 4648 Section 5）
第62个字符	+ （加号）	- （减号/连字符）
第63个字符	/ （斜杠）	_ （下划线）
填充符	使用 = 填充	通常省略 = 填充
典型用途	邮件MIME编码、PEM证书	JWT令牌、URL参数、文件名

体积与性能考量

Base64编码会使数据体积增大约33%（每3字节变为4字节）。如果编码后的字符串还包含换行符（MIME标准要求每76个字符换行一次），实际体积增加会略多于33%。在使用Base64时需要权衡以下因素：

HTTP请求减少：Data URI可以减少HTTP请求数量，对小文件（<5KB）效果显著
缓存失效：内嵌在HTML/CSS中的Base64数据无法被浏览器独立缓存，页面每次加载都需要重新传输
解码开销：浏览器解码Base64需要CPU时间，大量使用可能影响页面渲染性能
gzip压缩效率：Base64编码后的数据对gzip压缩不太友好，压缩率远低于原始二进制数据

Data URI格式详解

Data URI语法格式：
data:[<mediatype>][;base64],<data>

各部分含义：
data: — URI方案标识
mediatype — MIME类型，如image/png、image/jpeg、image/svg+xml
;base64 — 声明数据为Base64编码（若省略则为URL编码的文本）
,data — 实际的编码数据

HTML中使用：
<img src="data:image/png;base64,iVBORw0KGgo..." />

CSS中使用：
background-image: url(data:image/svg+xml;base64,PHN2Zy...);

JavaScript中生成：
canvas.toDataURL('image/png') // 返回完整Data URI
btoa(string) // 编码为Base64
atob(base64) // 解码Base64

💡 关于URL安全Base64的重要提示：如果你需要将Base64编码的数据放入URL参数、Cookie或文件名中，请务必使用URL安全的Base64变体（将"+"替换为"-"，将"/"替换为"_"，并去掉末尾的"="填充）。在JavaScript中，可以通过 btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') 来实现。许多现代库（如js-base64）直接提供了Base64URL编码函数。使用标准Base64直接放入URL会导致数据被错误解析，这是Web开发中常见的隐蔽Bug之一。

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

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

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