Base64 转图片

任意 dataURL→还原下载

407 次访问

Base64 → 图片

粘贴完整 DataURL(含 data:image/...;base64, 前缀)或纯 Base64 字符串 · 自动按 magic number 识别 PNG/JPG/GIF/WebP/BMP/SVG

关于 Base64 图片

· 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 不会离开本地,还原后可直接查看或下载,查看完毕关闭页面即清除,保护隐私。

💻

Markdown 图片嵌入

写技术文档或博客时,需要插入一张小图标或流程图,但不想依赖外部图床(可能失效或被墙)。先用本工具将图片转为 dataURL 后嵌入 Markdown 的 `![alt](data:...)` 语法,实现单文件自包含,适合离线文档或静态站点。

📦

数据包图片提取

数据分析师在处理 JSON 或 CSV 数据包时,发现字段中包含 Base64 编码的图片。用本工具批量还原每个 dataURL,快速验证图片内容是否符合预期,避免写 Python 脚本或调用图像库的额外开发成本,提升数据清洗效率。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具在线 Base64 转图片网站手动保存 HTML 文件
数据隐私纯浏览器处理,无上传需上传 dataURL 到服务器解码完全本地,不联网
处理速度即时,1 秒内取决于上传速度和服务器负载,3-10 秒取决于手动操作,约 30-60 秒
操作步骤粘贴 → 点击 → 下载粘贴 → 上传 → 等待 → 下载新建文件 → 粘贴代码 → 保存 → 改后缀 → 双击打开 → 保存图片
离线可用可离线使用必须联网可离线使用
大小限制受浏览器内存限制(通常 100MB+)受服务器上传限制(通常 10-50MB)受本地内存和编辑器限制
文件类型支持所有浏览器可渲染的图片格式仅支持网站预设的几种格式支持所有格式,但需手动处理 MIME
技术门槛零门槛零门槛需了解 HTML 和 Base64 编码原理

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 将完整的 dataURL 字符串粘贴到输入框中,格式如 data:image/png;base64,...
  2. 点击「还原」按钮,工具立即在浏览器内解析并生成图片预览
  3. 右键点击预览图片,选择「图片另存为」保存到本地

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
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 文本

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 缺失 MIME 类型前缀

错误
iVBORw0KGgoAAAANSUhEUgAAAAEAAAA
修复
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA

dataURL 标准格式为 data:[<mediatype>][;base64],<data>。缺少 MIME 声明时,浏览器无法识别数据类型,导致下载文件无扩展名或无法预览。

2. 混入 URL 编码字符

错误
data:image/png;base64,iVBORw0KGgo%2FAAA...
修复
data:image/png;base64,iVBORw0KGgo/AAA...

Base64 字符集为 A-Z、a-z、0-9、+、/、=。%2F 是 URL 编码后的 /,工具不会自动解码,会导致解码失败或生成损坏图片。

3. 包含换行符或空格

错误
data:image/png;base64,iVBORw0KGgo
AAAANSUhEUg...
修复
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

标准 Base64 是连续字符串,换行符、回车、空格等空白字符不属于合法字符集,工具会直接报错或截断。

4. MIME 类型与图片格式不匹配

错误
data:image/jpeg;base64,iVBORw0KGgo...(实际是 PNG 数据)
修复
data:image/png;base64,iVBORw0KGgo...

MIME 声明仅影响浏览器对文件的解释方式,不参与解码。但声明错误会导致下载文件扩展名错误(如 .jpg 实际是 PNG),无法正常打开。

5. 缺少等号填充或填充错误

错误
data:image/png;base64,iVBORw0KGgoAAA
修复
data:image/png;base64,iVBORw0KGgoAAA==

Base64 编码要求输入字节数能被 3 整除,不足时用 = 填充到 4 的倍数。缺少填充会导致解码时长度校验失败,工具拒绝处理。

6. 粘贴了完整 HTML 标签而非 dataURL

错误
<img src="data:image/png;base64,iVBOR..." />
修复
data:image/png;base64,iVBOR...

工具期望纯 dataURL 字符串,而非包装后的 HTML 标签。直接粘贴 <img> 标签会导致工具尝试解析整段 HTML,无法提取有效 Base64 数据。

7. 使用了非标准 Base64 变体(如 URL-safe)

错误
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、gif
  • base64_string — Base64 编码的图片数据字符串

示例

用户有一段 Base64 编码的 PNG 图片数据:iVBORw0KGgoAAAANSUhEUg...(省略)。将其拼接为 data:image/png;base64,iVBORw0KGgoAAAANSUhEUg... 后,浏览器可直接解析并触发下载,还原为原始图片文件。

适用范围

适用于任意标准 Base64 编码的图片数据(dataURL 格式)。不适用于非图片数据(如 PDF、音频)或非标准 Base64 编码(含换行符/空格)。基于 RFC 2397(data URL scheme)标准。

原理图

粘贴 dataURL用户输入解析 dataURL提取 MIME / Base64 数据创建 Image 对象解码为可渲染位图绘制到 Canvas准备导出为 Blob生成 Blob / 下载触发浏览器下载整个过程在浏览器本地完成,数据不上传服务器
用户输入 本地处理 输出结果

开发者集成

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 个高频疑问

怎么把 Base64 字符串转成图片并下载?
把完整的 dataURL(例如 data:image/png;base64,iVBORw0...)粘贴到输入框,点击「还原」按钮,页面会立即显示预览图。预览图下方有「下载」按钮,点击即可保存为对应格式的图片文件。注意:dataURL 必须以 data:image/ 开头,否则工具无法识别。如果只有纯 Base64 编码(没有 data:image/... 前缀),需要手动补全前缀才能正常解析。
为什么粘贴后图片显示不出来?
最常见的原因是 dataURL 格式不完整或编码错误。检查三点:① 必须以 data:image/ 开头,后面跟图片格式(如 png、jpeg、gif、webp);② 格式部分和 Base64 数据之间用分号 + base64, 连接,正确格式如 data:image/png;base64,iVBOR...;③ Base64 编码不能有空格或换行。如果编码来自控制台或代码,建议复制完整字符串后直接粘贴,不要手动删减。另外,某些长 Base64 字符串在复制时可能被截断,建议粘贴后检查末尾是否完整。
支持哪些图片格式?JPG 和 PNG 都能转吗?
支持所有常见的 Web 图片格式,包括 PNG、JPEG、GIF、WebP、BMP、SVG 等。具体取决于 dataURL 中声明的 MIME 类型——只要浏览器能原生渲染的格式,工具就能还原。例如 data:image/jpeg;base64,... 会显示为 JPG,data:image/gif;base64,... 会显示为 GIF(含动图)。如果格式浏览器不识别(如 TIFF、HEIC),预览区会空白,建议先用其他工具转为通用格式再操作。
Base64 字符串很长,会不会卡死浏览器?
纯浏览器端解析,性能取决于图片尺寸。一般 5MB 以内的 Base64 字符串(约对应 3-4MB 的图片文件)处理流畅;超过 10MB 时,部分低配手机或老旧浏览器可能出现卡顿或白屏。如果遇到卡顿,建议分两步操作:先用文本编辑器把 Base64 拆成多段,或直接用图片文件而非 Base64 方式。本工具没有文件大小上限,但受限于浏览器内存,超大图片建议在桌面端 Chrome 或 Edge 中使用。
这个工具会上传我的 Base64 数据到服务器吗?安全吗?
不会。工具为纯前端实现,所有解析、渲染、下载操作都在浏览器本地完成,不向任何服务器发送数据。可以断网后测试:关闭 Wi-Fi 后粘贴 dataURL,工具仍能正常显示图片。如果 Base64 中包含敏感信息(如证件照、截图),这种方式比上传到服务器更安全。下载图片时也是浏览器本地生成文件,不经过第三方。
Base64 转图片和直接上传图片文件有什么区别?
Base64 转图片适用于你手里只有编码字符串的场景,比如从网页控制台复制、API 返回的数据、数据库导出字段。直接上传文件则适用于本地有图片文件的场景。本工具只处理 Base64 → 图片的还原,不提供文件上传功能。如果你有图片文件但想得到 Base64,可以用其他在线工具或浏览器控制台 FileReader 转换。两者本质是互逆操作:文件 → Base64(编码),Base64 → 文件(本工具)。
转换后的图片质量和原图一样吗?会不会变模糊?
质量完全无损。Base64 编码是二进制数据的文本表示,解码后还原的图片数据与编码前完全一致,不存在压缩或质量损失。如果感觉变模糊,请检查原始 dataURL 的来源——某些工具在生成 Base64 时可能对原图做了压缩(例如缩略图或降低分辨率)。本工具只做解码,不改变像素、尺寸或元数据。下载后可以用图片查看器的属性对比文件大小,理论上完全一致。
为什么下载的图片文件名是乱码或没有后缀?
下载时默认文件名取自 dataURL 的格式声明,部分浏览器可能显示为「download」或无后缀。可以手动重命名,加上对应后缀(如 .png、.jpg)。如果希望保留原始文件名,建议在编码时把文件名信息单独保存,本工具不解析文件名元数据。另一种方法是下载后立即在文件管理器里右键重命名,或者使用浏览器的「另存为」功能自行指定名称和后缀。
选择 打开 +新窗口 esc关闭