Base64 编解码

Base64 编解码工具 🔐

功能完善的 Base64 编码和解码工具，支持文本、图片、文件等多种数据格式。

什么是 Base64？

Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式。它常用于：

在 URL、Cookie、网页中传输二进制数据
在 JSON、XML 中嵌入图片
电子邮件附件编码
数据存储和传输

功能特点

📝 文本编解码 - 快速编码/解码文本内容
🖼️ 图片转换 - 图片与 Base64 互转
📁 文件处理 - 支持任意文件格式
🔗 URL 安全 - 支持 URL 安全的 Base64 编码
📋 批量处理 - 一次性处理多个文件
🎨 实时预览 - 编码/解码结果即时显示

快速开始

文本编码

在输入框中输入要编码的文本：

Hello, 世界！

点击「编码」按钮
获取 Base64 结果：

SGVsbG8sIOS4lueVjO+8gQ==

文本解码

粘贴 Base64 编码的字符串
点击「解码」按钮
查看原始文本内容

功能详解

1. 文本编解码

标准 Base64

// 编码
const encoded = btoa("Hello World");
// 结果: "SGVsbG8gV29ybGQ="

// 解码
const decoded = atob("SGVsbG8gV29ybGQ=");
// 结果: "Hello World"

URL 安全 Base64

标准 Base64 包含 + 和 / 字符，在 URL 中需要转义。URL 安全版本使用 - 和 _ 替代：

标准: SGVsbG8gV29ybGQ=
URL安全: SGVsbG8gV29ybGQ-

适用场景：

URL 参数传递
JWT Token
文件名编码

中文处理

中文编码需要先转换为 UTF-8：

// 正确的中文编码方式
function utf8_to_b64(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function b64_to_utf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
}

// 使用
utf8_to_b64("你好世界");
// 结果: "5L2g5aW95LiW55WM"

2. 图片 Base64 转换

图片转 Base64

上传图片文件（支持拖拽）
工具自动生成 Base64 字符串
可以选择输出格式：
- 纯 Base64 - 仅数据部分
- Data URI - 完整的 data:image 格式
- CSS 背景 - 可直接用于 CSS
- HTML 标签 - 完整的 img 标签

输出示例：

<!-- Data URI 格式 -->
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

<!-- HTML 使用 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="图片">

<!-- CSS 使用 -->
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...);

Base64 转图片

粘贴 Base64 字符串
工具自动识别图片格式
预览图片并支持下载

3. 文件编解码

支持任意文件格式：

📄 文档（PDF、Word、Excel）
🎵 音频（MP3、WAV）
🎬 视频（MP4、AVI）
📦 压缩包（ZIP、RAR）
💻 可执行文件

文件转 Base64：

选择或拖拽文件
等待编码完成
复制 Base64 结果

Base64 转文件：

粘贴 Base64 字符串
指定文件扩展名（可选）
点击下载文件

4. 批量处理

一次性处理多个文件：

选择多个文件（支持拖拽）
选择处理方式：
- 全部编码
- 全部解码
批量下载结果

5. 高级选项

编码选项

换行 - 每 76 字符插入换行（RFC 规范）
填充 - 使用 = 填充（标准 Base64）
字符集 - UTF-8 / GBK / ISO-8859-1

解码选项

自动检测 - 自动识别编码格式
严格模式 - 检查非法字符
忽略空格 - 自动去除空格和换行

实际应用场景

场景 1：网页内嵌图片

将 small icon 转为 Base64，减少 HTTP 请求：

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiLz48L3N2Zz4=" alt="Red Circle">

优点：

减少 HTTP 请求
即时显示，无加载延迟
适用于小图标、背景图

缺点：

Base64 比原文件大约 33%
不适合大图片

场景 2：JWT Token 解析

JWT 的 Payload 部分使用 Base64Url 编码：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

解码 Payload：

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

场景 3：数据传输

在 JSON 中传输二进制数据：

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlL1BhZ2UvUGFyZW50IDIgMCBS...",
  "encoding": "base64"
}

场景 4：Cookie 存储

存储复杂数据到 Cookie：

const userData = {
  id: 123,
  name: "张三",
  role: "admin"
};

// 编码后存储
const encoded = btoa(JSON.stringify(userData));
document.cookie = `user=${encoded}; path=/`;

// 读取并解码
const cookie = document.cookie
  .split('; ')
  .find(row => row.startsWith('user='));
const user = JSON.parse(atob(cookie.split('=')[1]));

常见问题

Q: Base64 是加密吗？

A: 不是加密！ Base64 只是编码方式，任何人都可以解码。如果需要加密，请使用 AES、RSA 等加密算法。

Q: 为什么编码后字符串变长了？

A: Base64 使用 4 个字符表示 3 个字节，所以编码后长度约为原数据的 4/3（约 133%）。

Q: 解码失败怎么办？

A: 检查以下几点：

是否包含非法字符（Base64 只支持 A-Z、a-z、0-9、+、/、=）
是否有空格或换行（尝试开启「忽略空格」）
是否是 URL 安全格式（尝试切换解码模式）
中文字符是否正确使用 UTF-8 编码

Q: 支持多大的文件？

文本：无限制（但大文本可能卡顿）
文件：建议 50MB 以内
超大文件建议使用分片处理

Q: Base64 和 Base64Url 的区别？

特性	Base64	Base64Url
第 63 字符	`+`	`-`
第 64 字符	`/`	`_`
填充	`=`	可选/省略
用途	通用	URL、JWT