示例合集

Base64 示例大全

Q: Base64 编码后的字符串长什么样？

Base64 字符串由 A–Z、a–z、0–9、+、/ 组成，末尾可能有 = 或 == 的 padding。例如 "Hello" 编码为 "SGVsbG8="。Base64URL 变体用 - 代替 +，用 _ 代替 /，且不含 padding。

Q: HTML 中 Base64 图片是什么样的？

格式是 。src 里包含完整的 Data URI，浏览器直接从 URL 里读取图片数据，不发起网络请求。

Q: API 中传文件用 Base64 还是 multipart？

小文件（< 1 MB）且接口已经用 JSON 时，Base64 很方便——把文件塞进 JSON 字段一起发。文件较大、需要进度条或接口专门接受文件上传时，用 multipart/form-data 更合适，体积小约 33%，服务端处理也更高效。

文本、图片、SVG、Data URI、CSS、HTML、JSON、JWT、邮件、API——超过 20 个 Base64 真实使用场景，含输入输出示例和原理说明。

快速参考

输入	Base64 输出	说明
Hello	SGVsbG8=	末尾 = 是 padding
Hello, World!	SGVsbG8sIFdvcmxkIQ==	末尾 == 是 padding
{"ok":true}	eyJvayI6dHJ1ZX0=	JSON → Base64
Base64 Files	QmFzZTY0IEZpbGVz	无需 padding
1×1 PNG（68B）	iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY…	图片文件

23 个示例

"Hello" 编码

文本

输入

Hello

输出

SGVsbG8=

5 个字节，mod 3 = 2，末尾补一个 = padding。

文本转 Base64

"Hello, World!" 编码

文本

输入

Hello, World!

输出

SGVsbG8sIFdvcmxkIQ==

13 字节，mod 3 = 1，末尾补两个 == padding。

文本转 Base64

中文字符编码

文本

输入

你好，世界

输出

5L2g5aW977yM5LiW55WM

中文字符是 UTF-8 多字节，每个汉字占 3 字节，需要用 TextEncoder 而非直接 btoa()。

文本转 Base64

Base64 解码为文本

文本

输入

QmFzZTY0IEZpbGVz

输出

Base64 Files

每 4 个 Base64 字符解码为 3 个原始字节，再用 TextDecoder 转为 UTF-8 字符串。

Base64 转文本

1×1 透明 PNG

图片

输入

1×1 像素透明 PNG 文件（68 字节）

输出

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

最小合法 PNG 的 Base64 编码，68 字节原文件 → 92 字符 Base64（增大 35%）。

图片转 Base64

HTML img 内嵌图片

图片

输入

<img src="[data URI]" alt="内嵌图片">

输出

<img src="data:image/png;base64,iVBORw0KGgo…==" alt="内嵌图片">

把 Data URI 写入 src，图片直接内嵌在 HTML 里，无需额外 HTTP 请求。

图片转 Base64

SVG 圆形 Data URI

SVG

输入

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#1591DC"/></svg>

输出

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iIz…

SVG 内容用 TextEncoder 转 UTF-8 字节再 Base64 编码，MIME Type 是 image/svg+xml。

SVG 转 Base64

SVG 用作 CSS 背景

SVG

输入

SVG 图形

输出

.icon { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }

SVG 编码后写入 CSS background-image，适合图标，避免额外请求。

SVG 转 Base64

PNG Data URI 结构

Data URI

输入

PNG 文件 (image/png)

输出

data:image/png;base64,iVBORw0KGgo…==

Data URI 格式：data:[MIME];base64,[Base64数据]。MIME Type 告诉浏览器如何渲染。

Data URI 生成器

PDF Data URI

Data URI

输入

PDF 文件 (application/pdf)

输出

data:application/pdf;base64,JVBERi0xLjQ…

PDF 的 Base64 开头通常是 JVBERi0（%PDF- 的 Base64 编码），可以用作 iframe src 直接预览。

PDF 转 Base64

文本 Data URI

Data URI

输入

Hello, World!

输出

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

纯文本也可以编码为 Data URI，MIME Type 用 text/plain。

文本转 Base64

CSS background-image

CSS

输入

小图标（PNG）

输出

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgo…==");
  width: 32px;
  height: 32px;
}

把图标内嵌到 CSS，适合小图标（< 5 KB），避免单独 HTTP 请求，CSS 文件体积增大约 33%。

图片转 Base64

CSS @font-face 内嵌字体

CSS

输入

WOFF2 字体文件

输出

@font-face {
  font-family: 'MyFont';
  src: url('data:font/woff2;base64,d09GMgAB…') format('woff2');
}

将字体内嵌到 CSS，实现零外部请求的自包含样式表，适合小字体子集。

字体转 Base64

HTML 文件下载链接

HTML

输入

<!DOCTYPE html><html><body><h1>Hello</h1></body></html>

输出

<a href="data:text/html;base64,PCFET0NUWVBFIGh0bWw+…" download="page.html">下载 HTML</a>

把 HTML 内容编码为 Data URI，写入 <a download>，点击直接下载文件，不需要服务器。

HTML 转 Base64

iframe 沙箱嵌入

HTML

输入

HTML 内容

输出

<iframe
  src="data:text/html;base64,PCFE…"
  sandbox="allow-scripts"
></iframe>

HTML 编码为 Data URI 后用 sandbox iframe 嵌入，脚本在沙箱里运行，无法访问父页面。

HTML 转 Base64

JSON 对象编码

JSON

输入

{"name":"Alice","role":"admin"}

输出

eyJuYW1lIjoiQWxpY2UiLCJyb2xlIjoiYWRtaW4ifQ==

JSON 字符串先转 UTF-8 字节，再 Base64 编码，常用于 JWT payload 或 API 配置传输。

JSON 转 Base64

API 文件上传 payload

API

输入

二进制文件

输出

{
  "filename": "document.pdf",
  "content_type": "application/pdf",
  "data": "JVBERi0xLjQ…"
}

REST API 传文件时把 Base64 放进 JSON，适合小文件（< 1 MB）。大文件应改用 multipart/form-data。

API 专用 Base64

cURL 发送 Base64 文件

API

输入

编码后的文件 Base64 字符串

输出

curl -X POST https://api.example.com/files \
  -H 'Content-Type: application/json' \
  -d '{"data":"JVBERi0x…"}'

将 Base64 写入 JSON body，用 cURL 发送。接收方解码后得到原始二进制文件。

API 专用 Base64

JWT Header 解码

JWT

输入

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

输出

{"alg":"HS256","typ":"JWT"}

JWT 的第一段是 Header，用 Base64URL 编码（无 padding，+ 换 -，/ 换 _），解码后是算法信息。

JWT 解码器

JWT Payload 解码

JWT

输入

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNzE2MjM5MDIyfQ

输出

{"sub":"1234567890","name":"Alice","iat":1716239022}

JWT Payload 包含 claims（sub、name、iat 等），Base64URL 解码后是普通 JSON，不含签名验证。

JWT 解码器

Base64URL vs Base64

JWT

输入

标准 Base64：TWFu+w==
Base64URL：TWFu-w

输出

区别：+ → -   / → _   去掉末尾 =

JWT 使用 Base64URL 是因为 = 在 URL 中需要转义，+ 和 / 有歧义。Base64URL 让 token 可以安全放在 URL 参数里。

Base64URL 编码器

HTML 邮件内嵌图片

邮件

输入

图片文件

输出

<img src="data:image/png;base64,iVBORw0KGgo…==" alt="logo">

邮件客户端默认屏蔽外部图片请求，Data URI 直接把图片内嵌在 HTML 里，确保图片始终显示。

邮件专用 Base64

MIME 邮件多行格式

邮件

输入

Base64 字符串（长单行）

输出

SGVsbG8sIFdvcmxkISBUaGlzIGlzIGEgbG9u
ZyBzdHJpbmcgdGhhdCBuZWVkcyB0byBiZSBz
cGxpdCBpbnRvIDc2LWNoYXIgbGluZXMu

RFC 2045 规定 MIME 邮件中 Base64 每行最多 76 字符，每行末尾加 \r\n，防止旧邮件服务器截断。

邮件专用 Base64

常见使用模式

文本 / JSON 编码

纯文本直接 btoa()（仅 ASCII）
含中文须先 TextEncoder → btoa()
JSON.stringify 后再编码
JWT Payload 用 Base64URL 变体

图片 / 媒体内嵌

Data URI 格式：data:image/png;base64,...
HTML img src、CSS background-image
推荐 < 5 KB，大图用外链
HTML 邮件中避免外链，必须内嵌

API / 服务端传输

JSON payload 中传 Base64 文件
content_type + data 字段约定
< 1 MB 用 Base64，更大用 multipart
Node.js：Buffer.from(b).toString("base64")

所有工具

文本转 Base64

文本 ↔ Base64

Base64 转文本

解码文本

图片转 Base64

图片 → Data URI

SVG 转 Base64

SVG → Data URI

字体转 Base64

@font-face 内嵌

PDF 转 Base64

PDF → API payload

HTML 转 Base64

iframe / 下载链接

JSON 转 Base64

JSON → Base64URL

API 专用 Base64

JS/cURL/Python 示例

邮件专用 Base64

内联图 vs 附件

JWT 解码器

JWT Header / Payload

Base64URL 编码器

URL 安全变体

常见问题

Base64 编码后的字符串长什么样？

Base64 字符串由 A–Z、a–z、0–9、+、/ 组成，末尾可能有 = 或 == 的 padding。例如 "Hello" 编码为 "SGVsbG8="。Base64URL 变体用 - 代替 +，用 _ 代替 /，且不含 padding。

HTML 中 Base64 图片是什么样的？

格式是 <img src="data:image/png;base64,iVBORw0KGgo…==" alt="图片">。src 里包含完整的 Data URI，浏览器直接从 URL 里读取图片数据，不发起网络请求。

JWT 里的 Base64 示例是什么样的？

JWT 使用 Base64URL。Header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 解码为 {"alg":"HS256","typ":"JWT"}；Payload eyJzdWIiOiIxMjM0NTY3ODkwIn0 解码为 {"sub":"1234567890"}。注意没有 = padding，且用 - 和 _ 替换了 + 和 /。

Base64 编码 JSON 时需要注意什么？

中文、emoji 等非 ASCII 字符必须先用 TextEncoder 转换为 UTF-8 字节，再编码。直接 btoa(json) 在含非 Latin-1 字符时会抛异常。解码时也需要 TextDecoder 而不是 atob() 直接转字符串。

邮件里的 Base64 和普通 Base64 有什么区别？

MIME 邮件规范（RFC 2045）要求 Base64 每行最多 76 字符，行末加 \r\n 换行。这是为了兼容老旧邮件服务器对行长度的限制。现代 API 传输通常不需要多行格式，直接用单行 Base64 即可。

API 中传文件用 Base64 还是 multipart？

小文件（< 1 MB）且接口已经用 JSON 时，Base64 很方便——把文件塞进 JSON 字段一起发。文件较大、需要进度条或接口专门接受文件上传时，用 multipart/form-data 更合适，体积小约 33%，服务端处理也更高效。