点击或拖拽文件到这里
图片 · 音视频 · PDF · 任意二进制文件文件 / 图片 Base64 工具 在浏览器本地把任意文件编码为 Base64 字符串，或把 Base64 字符串还原为文件——不上传、不存储、不留日志。支持图片、音视频、PDF、字体等任何二进制格式。
两个方向：
| 方向 | 输入 | 输出 | 支持预览 |
|---|---|---|---|
| 文件 → Base64 | 拖拽任意文件 | Data URL / 纯 Base64 字符串 | 图片、音频、视频自动预览 |
| Base64 → 文件 | 粘贴字符串 | 可下载的文件 + 实时预览 | 根据 MIME 显示 img/audio/video |
Data URL 格式：data:[mime-type];base64,[编码内容]。例：data:image/png;base64,iVBORw0KGgoAAAA...。可直接放进 <img src>、CSS background-image: url()、<link href>。
典型用途：
- 内联小图：favicon、loading 菊花、纯装饰小图标嵌到 HTML/CSS 里
- JSON 字段传二进制：头像上传接口用 base64 字段传图，后端解码入库
- 邮件附件（MIME 底层就是 base64）
- 调试抓包：还原
data:...;base64,...看里面到底是什么 - 字体内联：
@font-face里src: url(data:font/woff2;base64,...)规避跨域
体积换时间：Base64 编码使体积增加约 33%。< 5KB 的资源内联省掉一次 HTTP 请求，净收益；超过 10KB 不如外链 + HTTP/2 多路复用。对于图像，现代首选 <img loading="lazy"> + WebP/AVIF，而不是 base64 内联。
本地运行：全程在浏览器内完成，FileReader 读取 + Blob URL 生成 + atob/btoa 解码。任何字节都不经过任何服务器。
📍使用场景
- 内联小图标到 HTML / CSS把 loading 菊花、logo 小图编成 data URL，塞进 `<img src>` 或 `background-image`，少一个 HTTP 请求。
- JSON / XML 传二进制接口字段只能装文本？把图片/PDF 先 base64 编一下，变成纯字符串就能塞进 JSON 了。
- 对接老系统 / 抓包还原日志里一串 `data:image/png;base64,...` 不知道是啥？粘进来直接预览+下载，比手写解码脚本快。
❓常见问题
Data URL 和纯 Base64 有什么区别？该选哪个？
Data URL：`data:image/png;base64,iVBOR...` 带 MIME 类型前缀，浏览器、img 标签、CSS 能直接识别渲染。纯 Base64：只有编码内容，适合塞进数据库字段、JSON value、协议二进制字段。经验：前端要直接显示用 Data URL，后端存储/传输用纯 Base64 + 单独 MIME 字段。工具顶部的开关可随时切换。
为什么文件 Base64 后体积变大约 33%？
这是 Base64 编码的固定开销——每 3 字节原始数据编为 4 个字符，4/3 ≈ 1.33。100KB 的图 base64 后约 137KB。所以 < 5KB 的小图内联能省 HTTP 请求，收益大于体积开销；> 10KB 反而增加传输和首屏解析成本，不如外链 + HTTP/2 并发。
Base64 → 文件时没有 `data:` 前缀怎么办？
工具会识别没有 `data:` 前缀的纯 Base64，并弹出 MIME 类型输入框——你手动填 `image/png` / `application/pdf` / `video/mp4` 等，它才能正确预览和识别扩展名。不填的话默认 `application/octet-stream`，下载得到 `.bin` 文件，但内容字节完全正确。
预览大视频 / 大 PDF 会卡吗？
会。Data URL 编码超过 10MB 时，`fetch(dataUrl).blob()` 解码本身会占一点时间，浏览器解析 base64 也耗 CPU。工具在开始解析前会展示 loading 状态。实用建议：视频、大 PDF 一般不走 base64，直接二进制上传更合适；本工具适合中小文件（图片、音频、小 PDF、字体）。
文件能直接从剪贴板粘贴 base64 吗？
可以。下半区的粘贴按钮会读取剪贴板文本，自动识别是否 `data:` 开头。超长字符串（> 2000 字符）在输入框里会显示截断预览（头尾各留一段），内部仍保留完整数据——这是为了避免超长字符串把浏览器输入框卡住，解析/下载用的都是原始完整内容。
工具会把我上传的图片或文件传到服务器吗？
不会。所有编码、解码、预览、下载都在浏览器本地完成（FileReader API + Blob URL），没有任何网络请求上传你的内容。放心处理生产截图、内部 PDF、私密字体文件。关掉标签页后，临时 Blob URL 自动回收，不留痕迹。