Base64 → 图片
粘贴完整 DataURL(含 data:image/...;base64, 前缀)或纯 Base64 字符串 · 自动按 magic number 识别 PNG/JPG/GIF/WebP/BMP/SVG
任意 dataURL→还原下载
粘贴完整 DataURL(含 data:image/...;base64, 前缀)或纯 Base64 字符串 · 自动按 magic number 识别 PNG/JPG/GIF/WebP/BMP/SVG
· Magic Number 识别:PNG(89 50 4E 47)/ JPG(FF D8)/ GIF(47 49 46)/ WebP(52 49 46 46 ... 57 45 42 50)/ BMP(42 4D)/ SVG(3C 3F xml 或 3C svg)
· DataURL:浏览器内嵌图片标准格式,用于内联到 HTML/CSS/JSON。本工具可还原为真实图片文件下载
· 体积膨胀:Base64 编码后体积约 1.37× 原图(4 字节表 3 字节);这是它在 Web 内联中的代价
· 反向操作:图片转 Base64 见 /tupian/imgbase64
了解工具定位 · 使用场景 · 对比优势
将 Base64 编码的 dataURL 字符串还原为图片文件,支持 PNG、JPG、GIF 等常见格式,直接下载到本地。前端开发调试、设计稿切图提取、邮件中内嵌图片的保存都能快速完成。所有转换在浏览器本地执行,图片数据不上传服务器。
前端开发者在浏览器控制台或网络抓包中拿到一段 Base64 编码的 dataURL,想确认图片内容是否正确。直接粘贴到本工具,一键还原并下载,省去手动拼接、新建 HTML 文件或用在线预览页面的繁琐步骤,快速验证图片是否损坏、格式是否匹配。
移动端测试人员从 App 日志或数据库导出图片时,得到的往往是 Base64 字符串。用本工具将 dataURL 还原为原始 PNG 或 JPEG 文件,无需搭建本地服务或安装图像处理软件,直接下载到手机相册,方便对比 UI 还原度或提交 Bug 截图。
收到他人发送的 Base64 编码的敏感图片(如身份证、合同扫描件),不想上传到第三方图床或云盘,以免留下缓存副本。本工具纯浏览器端处理,dataURL 不会离开本地,还原后可直接查看或下载,查看完毕关闭页面即清除,保护隐私。
写技术文档或博客时,需要插入一张小图标或流程图,但不想依赖外部图床(可能失效或被墙)。先用本工具将图片转为 dataURL 后嵌入 Markdown 的 `` 语法,实现单文件自包含,适合离线文档或静态站点。
数据分析师在处理 JSON 或 CSV 数据包时,发现字段中包含 Base64 编码的图片。用本工具批量还原每个 dataURL,快速验证图片内容是否符合预期,避免写 Python 脚本或调用图像库的额外开发成本,提升数据清洗效率。
| 维度 | 本工具 | 在线 Base64 转图片网站 | 手动保存 HTML 文件 |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理,无上传 | 需上传 dataURL 到服务器解码 | 完全本地,不联网 |
| 处理速度 | 即时,1 秒内 | 取决于上传速度和服务器负载,3-10 秒 | 取决于手动操作,约 30-60 秒 |
| 操作步骤 | 粘贴 → 点击 → 下载 | 粘贴 → 上传 → 等待 → 下载 | 新建文件 → 粘贴代码 → 保存 → 改后缀 → 双击打开 → 保存图片 |
| 离线可用 | 可离线使用 | 必须联网 | 可离线使用 |
| 大小限制 | 受浏览器内存限制(通常 100MB+) | 受服务器上传限制(通常 10-50MB) | 受本地内存和编辑器限制 |
| 文件类型 | 支持所有浏览器可渲染的图片格式 | 仅支持网站预设的几种格式 | 支持所有格式,但需手动处理 MIME |
| 技术门槛 | 零门槛 | 零门槛 | 需了解 HTML 和 Base64 编码原理 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNpi/P//PwMlgJmB5AIBBgA3BQcPAAAAASUVORK5CYII= | 生成一个 1x36 像素的 PNG 图片文件,可直接下载 | 典型场景:极简纯色小图,验证 base64 解码正确性 |
| data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYI4Q/9oADAMBAAIRAxEAPwC0B//Z | 生成一个 1x1 像素的 JPEG 图片文件,可直接下载 | 边界 case:最小尺寸 JPEG(1x1),测试格式兼容性 |
| data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 | 生成一个 1x1 像素的透明 GIF 图片文件,可直接下载 | 典型场景:透明占位图,常用于网页布局 |
| data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0icmVkIi8+PC9zdmc+ | 生成一个 100x100 像素的红色 SVG 矢量图文件,可直接下载 | 典型场景:SVG 矢量图,支持无损缩放 |
| data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAQAcJaQAA3AA/v+AAAAA | 生成一个 1x1 像素的 WebP 图片文件,可直接下载 | 边界 case:WebP 格式,测试现代浏览器兼容性 |
| data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNpi/P//PwMlgJmB5AIBBgA3BQcPAAAAASUVORK5CYII=,data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNpi/P//PwMlgJmB5AIBBgA3BQcPAAAAASUVORK5CYII= | 仅识别并处理第一个 dataURL,生成对应图片 | 易错 case:输入多个 dataURL 时只处理第一个 |
| data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNpi/P//PwMlgJmB5AIBBgA3BQcPAAAAASUVORK5CYII= | 生成一个 1x36 像素的 PNG 图片文件,可直接下载 | 边界 case:base64 字符串包含换行符时自动忽略 |
| not a valid base64 string | 提示:输入不是有效的 dataURL 格式 | 易错 case:用户直接粘贴非 base64 文本 |
iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdataURL 标准格式为 data:[<mediatype>][;base64],<data>。缺少 MIME 声明时,浏览器无法识别数据类型,导致下载文件无扩展名或无法预览。
data:image/png;base64,iVBORw0KGgo%2FAAA...data:image/png;base64,iVBORw0KGgo/AAA...Base64 字符集为 A-Z、a-z、0-9、+、/、=。%2F 是 URL 编码后的 /,工具不会自动解码,会导致解码失败或生成损坏图片。
data:image/png;base64,iVBORw0KGgo
AAAANSUhEUg...data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...标准 Base64 是连续字符串,换行符、回车、空格等空白字符不属于合法字符集,工具会直接报错或截断。
data:image/jpeg;base64,iVBORw0KGgo...(实际是 PNG 数据)data:image/png;base64,iVBORw0KGgo...MIME 声明仅影响浏览器对文件的解释方式,不参与解码。但声明错误会导致下载文件扩展名错误(如 .jpg 实际是 PNG),无法正常打开。
data:image/png;base64,iVBORw0KGgoAAAdata:image/png;base64,iVBORw0KGgoAAA==Base64 编码要求输入字节数能被 3 整除,不足时用 = 填充到 4 的倍数。缺少填充会导致解码时长度校验失败,工具拒绝处理。
<img src="data:image/png;base64,iVBOR..." />data:image/png;base64,iVBOR...工具期望纯 dataURL 字符串,而非包装后的 HTML 标签。直接粘贴 <img> 标签会导致工具尝试解析整段 HTML,无法提取有效 Base64 数据。
data:image/png;base64,iVBORw0KGgo-AAA...(- 代替 +)data:image/png;base64,iVBORw0KGgo+AAA...标准 Base64 使用 + 和 /,URL-safe 变体使用 - 和 _。工具按标准 Base64 解码,使用 URL-safe 字符会导致解码结果完全错误。
公式推导 · 流程图解 · 依据出处
data:image/{format};base64,{base64_string}
format — 图片格式,如 png、jpeg、gifbase64_string — Base64 编码的图片数据字符串用户有一段 Base64 编码的 PNG 图片数据:iVBORw0KGgoAAAANSUhEUg...(省略)。将其拼接为 data:image/png;base64,iVBORw0KGgoAAAANSUhEUg... 后,浏览器可直接解析并触发下载,还原为原始图片文件。
适用于任意标准 Base64 编码的图片数据(dataURL 格式)。不适用于非图片数据(如 PDF、音频)或非标准 Base64 编码(含换行符/空格)。基于 RFC 2397(data URL scheme)标准。
3 种主流语言 · 复制即用
import base64
import re
# 解析 dataURL,提取纯 base64 数据
data_url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA="
match = re.match(r"data:.*?;base64,(.+)", data_url)
if not match:
raise ValueError("不是有效的 dataURL")
# 解码并写入文件
raw = match.group(1)
image_bytes = base64.b64decode(raw)
with open("output.png", "wb") as f:
f.write(image_bytes)
print(f"已保存 output.png ({len(image_bytes)} bytes)")package main
import (
"encoding/base64"
"fmt"
"os"
"strings"
)
func main() {
dataURL := "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA="
// 去掉 data:...;base64, 前缀
i := strings.Index(dataURL, ",")
if i < 0 {
panic("不是有效的 dataURL")
}
raw := dataURL[i+1:]
// 解码并写入文件
imageBytes, err := base64.StdEncoding.DecodeString(raw)
if err != nil {
panic(err)
}
os.WriteFile("output.png", imageBytes, 0644)
fmt.Printf("已保存 output.png (%d bytes)\n", len(imageBytes))
}// 浏览器环境:dataURL → 下载
function downloadFromDataURL(dataURL, filename = 'image.png') {
const link = document.createElement('a');
link.href = dataURL;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
}
// 使用示例
downloadFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA=');8 个高频疑问
「格式转换」下的其他工具