Base64 转图片 — 在浏览器中将 Base64 Data URL 解码为图片文件
把 Base64 图片的 data URL 解码回 PNG、JPG、WebP 或 GIF 文件。拖拽或粘贴即用,完全在浏览器中完成。无上传、无限制。
Base64 编码的图片如今出现的场景比以往任何时候都多。最初的应用是 1990 年代的邮件附件 —— MIME 需要一种把二进制嵌入 7 位干净文本通道的办法 —— 但现在的用例已经变得更多样、更频繁:CSS 和 HTML 里的 data URL(把一个图标内联进样式表)、把图片当作文本来传的 API JSON 载荷、构建流水线里的内容寻址哈希,以及把图片以文本形式拷到剪贴板的截屏工具(这样能粘贴到任何应用里)。模式始终一致:一串以 data:image/...;base64, 开头、看起来像随机字符的字符串,需要还原成可以打开、编辑或上传的文件。
解码中「不那么显然」的一点是 data URL 前缀本身就精确说明了二进制内容。image/png 表示解码出来的字节是合法的 PNG 文件(文件头字节 89 50 4E 47),image/jpeg 表示 JPEG(FF D8 FF),image/webp 表示 WebP(RIFF...WEBP),image/gif 表示 GIF(GIF87a 或 GIF89a)。本解码器会读取 MIME 前缀,据此设置输出文件扩展名,并校验解码载荷的前几个字节是否与声明的格式一致。如果没有 MIME 前缀,工具会按二进制签名推测,并把输出文件标记为推测出的扩展名。
最终的交接:如果解码出的图片是网站的 logo 或图标,考虑改成 SVG —— 矢量 logo 可以任意缩放,体积也比等效的 Base64 PNG 更小。如果 Base64 来源是 CSS 文件,那它本来就在合适的位置,可以考虑直接内联而非抽取出来。如果解码出的图片是几十张里的一张,并且你想换格式(PNG 转 WebP、JPG 转 PNG),把解码器与某个图片格式转换工具串联起来 —— 先保存解码文件,再丢给格式转换器。
使用方法
粘贴 data URL 或 Base64 字符串
把完整的 `data:image/png;base64,...` URL 或原始载荷放入输入框。工具会从 MIME 前缀自动识别图片格式;如果没有前缀,则按二进制签名判断。
预览解码后的图片
解码后的图片会出现在预览面板中,并标注格式、尺寸和解码后的字节大小。较大的图片会按缩放后的尺寸预览,避免界面卡顿。
下载文件
下载的文件保留原始 MIME 类型对应的扩展名 —— PNG data URL 是 `.png`,JPEG 是 `.jpg`,WebP 是 `.webp`。文件名默认为 `decoded-<时间戳>.<扩展名>`。
常见问题
data URL 的前缀长什么样?
data URL 的形式是 `data:image/png;base64,iVBORw0KGgo...`。第一段指定 MIME 类型,然后是 `base64`,接着是逗号,最后是载荷。工具会自动去掉前缀。
能处理很大的 Base64 图片吗?
可以,但解码后的图片在保存前会驻留在内存中。10 MB 的 Base64 字符串解码后大约是 7.5 MB 的像素数据 —— 在现代硬件的浏览器限制内。100 MB 以上的载荷可能会让页面卡住。
我一开始怎么拿到 Base64 字符串?
用「图片转 Base64」工具编码本地文件,或从 CSS 规则、HTML img src 属性、JSON Web Token 载荷,或开发者工具网络标签页的响应体中复制。
输出会和源文件逐像素一致吗?
是的 —— 转换是字节级精确的。Base64 是可逆编码,解码出的字节与编码前的字节完全一致,再解码出的像素也与原图完全相同。
如果 Base64 出错或被截断怎么办?
工具会校验输入长度和 Base64 字符表。如果字符串在某个字符中间被截断,解码器会停在最后一个完整的 4 字符块,并在界面里提示截断。
限制说明
- 大图片内存占用高解码 50 MB 的 Base64 图片大约消耗 200 MB 的浏览器内存(解码出的像素加上画布)。对超大的载荷,直接保存为文件比渲染预览更稳妥。
- 每次只解码一张一个 Base64 字符串产出一个文件。批量场景下,让工具循环运行,或者用 Node.js 加 Buffer API 写个小脚本。浏览器界面针对单次解码做了优化,不适合大批量抽取。
- 不支持动画 GIF 选帧动画 GIF 在预览中只解码出第一帧。下载的文件仍是完整的 GIF,所有帧都保留 —— 出于性能考虑,界面只显示第一帧。
平台说明
- macOS
- 解码后的 PNG/JPG 双击即可在 Preview 中打开。如果需要自动化,命令行等价方案是 `echo '<base64>' | base64 -d > out.png`。对于偶尔的解码任务,浏览器工具免去了打开终端的麻烦。
- Windows
- 命令行等价方案是 PowerShell 的 `[System.Convert]::FromBase64String()` 配合文件写入。对于从 CSS 文件、HTML 页面或聊天窗口复制的载荷,浏览器工具是更顺手的选择。
- Linux
- 大多数 Linux 图片查看器(Eye of GNOME、Gwenview、feh)都能打开解码后的文件。如果要从 CSS 中命令行抽取,等价做法是 `grep -oP 'data:image/[^"]+' file.css | base64 -d > image.png`。
- iOS
- iOS Safari 可以处理很长的 data URL,但会在地址栏截断显示。从备忘录应用把 Base64 粘贴进输入框即可,下载的图片通过分享面板导入 Photos。
- Android
- Android 版 Chrome 处理长输入不会截断。下载的文件存到下载文件夹,通过相册应用的分享 intent 导入到 Photos。