如何将 Base64 字符串还原为图片文件
把 API 响应、浏览器快照或粘贴片段里的 `data:image/...` 解码成可保存、可分享的 PNG 或 JPEG。
与本篇教程搭配使用的更多工具：
为什么重要
前端在调试图表库：库返回 data:image/png;base64,...，你想把渲染结果作为真实 PNG 附在缺陷报告里。手动解码要理清 MIME 前缀、逗号边界以及正确的 Buffer API。专用工具则是粘贴即下载。
三个真实场景
从 console.log 复制 data URI，粘贴后下载 PNG。
可贴进工单
解码预览，无需临时写 Node 脚本。
肉眼确认
粘贴 cid: 引用的 Base64 块，恢复原始图像再移交分析。
交给安全团队
操作指南
打开 Base64 转图片。
粘贴 data URI 或裸 Base64
两种形式均可。工具根据前缀识别 MIME；若仅有裸 Base64，则需手动选择类型。
预览图像
解码结果在右侧渲染，并报告宽高与文件类型。
校验完整性
若预览损坏或尺寸为 0×0，说明输入损坏或被截断。
下载为文件
默认文件名使用推断的扩展名（
.png、.jpg、.webp）。可选：哈希指纹
将保存的文件送入 哈希生成 做完整性校验。
Data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9V4dM7sAAAAASUVORK5CYII=解码结果
Image: 1 × 1 PNG
Size: 68 bytes (decoded)
进阶技巧
- 解码前先去掉空白。 邮件粘贴的 Base64 常有每 76 字符的软换行。
- 核对 MIME 是否与实际字节一致。 攻击者可能在
data:image/svg+xml中夹带脚本；解码后务必检视。 - 多图 data URI（清单导出、JSON）可在前缀后的逗号处拆分后分别解码。
- 反向操作——若有文件需要 data URI，使用 图片转 Base64。
常见误区
常见误区
MIME 不符导致扩展名错误
data URI 前缀是权威来源。若前缀写 image/jpeg 实际字节却是 PNG，文件将无法打开。请检查魔数（PNG、JFIF）。
常见误区
超长 Base64 粘贴卡死
多兆字节的字符串可能让文本框挂起。可先保存为 .txt，再拖入输入区而非直接粘贴。
何时不适合用本工具
- 代码内程序化解码——使用语言原生 API（
atob、Buffer.from、base64.b64decode）。 - 非图像二进制（如
.woff2、音频）——用 编解码工具 并以通用二进制下载。 - 从 PDF / 邮箱批量抽取——需要专用取证工具处理容器格式。
常见问题
是否支持超大文件？
在浏览器内存允许范围内可达数百 MB；再大建议终端 base64 -d。
支持 SVG 吗？
支持。data:image/svg+xml;base64,... 可解码预览并保存为 .svg。
数据会上传吗？
不会。解码完全在浏览器本地完成。
下一步
- 用 图片压缩 缩小恢复后的图像。
- 用 哈希生成 为归档文件生成哈希。
- 需要反向（图 → Base64）可用 图片转 Base64。