Base64 转图片
请在左侧粘贴图片 Base64
免费在线将 Base64 编码数据还原为可预览的图片并下载,支持 PNG/JPG/WebP/GIF/SVG 等 7+ 常见图片格式。自动识别 Data URL 前缀,浏览器内直接预览,适合接口调试和编码验证。
相关推荐
什么是 Base64 转图片?
Base64 转图片是 Base64 编码的逆过程:将 Base64 编码的字符串还原为原始的二进制图片数据(如 PNG / JPG / WebP / GIF / SVG 等格式),并在浏览器内直接预览或下载为本地图片文件。这是处理 API 返回图片、内联资源(Data URL)、邮件附件 Base64 等场景的必备工具。
**核心原理:** Base64 把二进制数据编码为 64 个可打印 ASCII 字符(A-Z、a-z、0-9、+、/),转图片就是把这段 ASCII 字符串还原回原始的二进制字节流,再由浏览器按指定 MIME 类型(image/png 等)解析为图片像素展示。Data URL(如 `data:image/png;base64,iVBORw0KGgo...`)则是 Base64 + MIME 前缀的组合形式,工具会自动识别并处理。
**典型使用场景:** ①API 调试:很多 API 返回图片验证码、用户头像、电子签名时直接返回 Base64 字符串,前端需要还原查看;②前端开发:Data URL 嵌入的小图标(CSS background-image: url(data:image/png;base64,...))可粘贴到工具中查看实际效果;③邮件附件还原:MIME Base64 编码的附件可解码回原图片保存;④爬虫数据:抓取的图片 Base64 可解码后保存为本地文件;⑤OCR 预处理:解码后用 OCR 工具识别图片内容。
**支持的图片格式:** 工具支持所有浏览器原生识别的图片 MIME 类型:PNG (image/png)、JPG/JPEG (image/jpeg)、WebP (image/webp)、GIF (image/gif)、SVG (image/svg+xml)、BMP (image/bmp)、AVIF (image/avif)、ICO (image/x-icon) 等。每种格式有不同的压缩算法和适用场景:PNG 无损适合图标和截图,JPG 有损适合照片,WebP 现代浏览器推荐,SVG 矢量适合图标和 logo。
**解码安全性:** 所有解码操作在浏览器内通过 JavaScript 完成(基于 `atob()` + `TextDecoder` 或 `Blob` API),图片二进制数据不上传任何服务器。包含敏感信息的 Base64 字符串(如用户头像、内部截图)可放心使用,关闭页面后所有数据自动清除。
适用场景
- 将 API 返回的 Base64 图片数据还原为可预览和下载的图片文件
- 验证前端内联图片资源(Data URL 格式)是否正确编码
- 调试图片上传接口时确认 Base64 内容是否完整
- 将 Base64 图片保存为本地 PNG/JPG 文件用于设计或文档
- 解码邮件附件 Base64 编码还原为图片
- 爬虫抓取的图片 Base64 还原后保存到磁盘
- 解码 Data URL 验证 SVG 图标实际渲染效果
- 把 OCR / AI 接口返回的 Base64 图片还原为本地文件查看
使用方法
- 粘贴 Base64 编码的图片数据(支持带或不带 Data URL 前缀,如 data:image/png;base64,iVBORw0KG...)
- 工具自动检测 MIME 类型并解码(在 Data URL 中识别,或根据内容头嗅探)
- 右侧实时显示图片预览和文件大小、尺寸信息
- 点击「下载」保存为本地图片文件,或右键图片「图片另存为」
- 如解码失败,可手动指定 MIME 类型或使用 Base64 Clean 工具预处理
功能特点
- 在线图片预览:解码后直接在浏览器内显示图片,无需下载到本地
- 多格式支持:支持 PNG / JPG / WebP / GIF / SVG / BMP / AVIF 等 7+ 常见图片 MIME 类型
- Data URL 自动识别:自动剥离 data:image/png;base64, 前缀,提取纯 Base64 内容解码
- 纯 Base64 输入:支持不带前缀的纯 Base64 字符串,可指定 MIME 类型
- 图片文件下载:支持一键保存解码后的图片为本地 PNG/JPG 文件
- 实时字符统计:实时显示输入字符数、解码后字节数,方便评估图片大小
- 错误检测:解码失败时提示具体错误位置(无效 Base64 字符、长度不对、MIME 不匹配)
- 浏览器本地零上传:所有解码和预览在浏览器内完成,不经过任何服务器
- 完全反向兼容:与「图片转 Base64」工具配对使用,形成完整的双向转换工作流
代码示例
JavaScript:浏览器原生解码 + Blob URL 预览
javascript使用浏览器原生 atob() + TextDecoder + Blob API 解码 Base64 并在浏览器内显示图片。
// Base64 → 图片(浏览器原生实现)
function base64ToImage(base64String, mimeType = 'image/png') {
// 1. 去除 Data URL 前缀(如果有)
const clean = base64String.replace(/^data:image\/\w+;base64,/, '');
// 2. 浏览器原生 atob() 解码为二进制字符串
const binary = atob(clean);
// 3. 转为 Uint8Array
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
// 4. 创建 Blob URL 用于 <img> 标签预览
const blob = new Blob([bytes], { type: mimeType });
const url = URL.createObjectURL(blob);
// 5. 设置 img.src 即可预览
const img = document.createElement('img');
img.src = url;
img.onload = () => {
console.log(`图片尺寸: ${img.width}x${img.height}`);
console.log(`文件大小: ${bytes.byteLength} bytes`);
};
return { img, url, size: bytes.byteLength };
}
// 使用示例:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);
// 释放 Blob URL(避免内存泄漏)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);Python:base64 库解码并保存图片
pythonPython 标准库 base64 解码 Base64 数据为图片二进制流,再用 PIL/Pillow 或内置文件操作保存。
import base64
from pathlib import Path
def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
"""将 Base64 字符串解码并保存为图片文件"""
# 1. 去除 Data URL 前缀
if base64_string.startswith('data:image'):
# 格式: data:image/png;base64,iVBORw0...
header, base64_string = base64_string.split(',', 1)
# 自动从 header 提取 MIME
if 'image/' in header:
mime_type = header.split('data:')[1].split(';')[0]
# 2. 解码
image_bytes = base64.b64decode(base64_string)
# 3. 保存到文件
output_file = Path(output_path)
output_file.parent.mkdir(parents=True, exist_ok=True)
output_file.write_bytes(image_bytes)
print(f"✅ 已保存: {output_file}")
print(f" 文件大小: {len(image_bytes):,} bytes")
print(f" MIME 类型: {mime_type}")
return output_file
# 使用示例:
# 1. 从 API 响应中获取的 Base64 字符串
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."
# 2. 解码并保存
base64_to_image(api_base64_response, 'output/captcha.png')
# 3. 可选:用 PIL 进一步处理
try:
from PIL import Image
img = Image.open('output/captcha.png')
print(f"图片尺寸: {img.size}")
img.save('output/captcha.png', optimize=True)
except ImportError:
print('安装 Pillow 以处理图片: pip install Pillow')Java:java.util.Base64 + ImageIO 解码图片
javaJava 标准库 Base64 解码图片二进制流,配合 ImageIO / BufferedImage 处理图片元数据。
import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
public class Base64ToImage {
public static void main(String[] args) throws Exception {
String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
String mimeType = "image/png";
// 1. 去除 Data URL 前缀(如果有)
if (base64String.startsWith("data:image")) {
int commaIdx = base64String.indexOf(',');
String header = base64String.substring(0, commaIdx);
base64String = base64String.substring(commaIdx + 1);
// 从 header 提取 MIME
if (header.contains("image/")) {
mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
}
}
// 2. Base64 解码
byte[] imageBytes = Base64.getDecoder().decode(base64String);
// 3. 保存到文件
String extension = mimeType.substring("image/".length());
File outputFile = new File("output." + extension);
try (FileOutputStream fos = new FileOutputStream(outputFile)) {
fos.write(imageBytes);
}
System.out.println("✅ 已保存: " + outputFile.getAbsolutePath());
System.out.println(" 文件大小: " + imageBytes.length + " bytes");
// 4. (可选)读取图片元数据
ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
BufferedImage image = ImageIO.read(bais);
if (image != null) {
System.out.println("图片尺寸: " + image.getWidth() + "x" + image.getHeight());
}
}
}常见问题
支持哪些图片格式?
支持 PNG、JPG、WebP、GIF、SVG、BMP、AVIF、ICO 等所有浏览器原生识别的图片 MIME 类型。工具会根据 Data URL 中的 MIME 前缀或输入特征自动判断,也可在界面手动指定 MIME 类型。选择正确的格式可以确保浏览器正确解码和显示。
输入需要带 data:image/png;base64 前缀吗?
不需要。工具支持两种格式输入:①纯 Base64 字符串(如 iVBORw0KGgoAA...),需要在界面选择 MIME 类型(如 PNG / JPG);②Data URL 格式(如 data:image/png;base64,iVBORw0KGgo...),工具自动识别前缀中的 MIME 类型并解码。两种输入方式都支持。
可以在浏览器里直接预览吗?
可以。解码后的图片会通过 Blob URL 在浏览器内直接显示,支持在线预览。确认内容无误后,再下载为本地文件或复制 Data URL 用于 HTML/CSS 内嵌。整个预览过程无需网络请求。
和 Base64 转文件工具有什么区别?
Base64 转图片专门针对图片格式优化:①自动识别 MIME 类型;②通过 Blob URL 在浏览器内直接预览;③根据 MIME 自动设置文件扩展名(.png / .jpg 等);④图片尺寸信息展示。Base64 转文件是通用工具,适合任意二进制文件的还原和下载(如 PDF、ZIP、音频等)。
解码后图片显示不完整怎么办?
可能原因:①Base64 字符串被截断(检查长度是否完整);②MIME 类型指定错误(如把 PNG 数据当作 JPG 解码);③原始数据本身已损坏。建议:①确认源 Base64 完整;②尝试切换不同 MIME 类型;③用 Base64 Validate 工具检查合法性。
Base64 体积会比原图大多少?
Base64 编码会使原始二进制数据体积增加约 33%(3 字节 → 4 字符)。例如 100KB PNG 编码后约 133KB Base64 字符串。所以 Base64 适合小型图片(< 10KB),大图片建议使用 HTTP URL 直接传输。
支持 SVG 矢量图吗?
支持。SVG 是一种基于 XML 的矢量图格式,Base64 编码后可直接嵌入 HTML <img> 或 CSS background-image。解码后会在浏览器内以矢量方式渲染,可无损缩放。注意 SVG 中可能含 JavaScript 代码,使用时需注意 XSS 安全。
如何保存为指定格式?
解码后点击下载按钮,工具会根据解码时的 MIME 类型自动添加对应扩展名(image/png → .png、image/jpeg → .jpg)。如需转换格式(如 PNG → JPG),建议先解码后用其他工具(如 Canvas / ImageMagick)转换。
解码后图片是空白或损坏?
常见原因:①Base64 包含换行符或空格未清理——先用 Base64 Clean 工具预处理;②padding(=)缺失——本工具会自动补全;③MIME 类型与原数据不匹配——检查源 API 返回的 Content-Type 或手动尝试其他 MIME;④源 Base64 在传输过程中被截断——重新获取完整字符串。
支持大图片(>10MB)吗?
支持,但浏览器对超大图片渲染性能下降。10MB Base64(约 7.5MB 原图)解码通常流畅;超过 50MB 可能出现内存警告。建议:①先用 base64-clean 去除空白;②分块解码大图;③确认浏览器内存足够(建议 4GB+)。
故障排查
解码后图片显示空白
可能 MIME 类型不匹配或 Base64 不完整。检查:1)源 API 返回的 Content-Type 头;2)手动切换 MIME 类型重试;3)确认 Base64 字符串完整(长度符合预期)。
InvalidCharacterError 解码失败
Base64 字符串包含非法字符(空格、换行、中文等)。先用 Base64 Clean 工具去除所有空白和非法字符,然后再转换。
下载的图片扩展名错误
检查解码时的 MIME 类型是否与原图一致。如源 API 返回 image/jpeg 但 Base64 数据实际是 PNG,下载后扩展名会是 .jpg 但实际是 PNG 格式。建议从 MIME 前缀或 Content-Type 头确认原始格式。
解码大图片时浏览器卡死
超过 50MB 的 Base64 字符串可能导致内存溢出。建议:①先用 base64-clean 工具去除空白字符;②分批解码大图(如按 tile 切分);③确认浏览器内存足够(建议 4GB+ 可用内存);④使用服务端 Node.js / Python 脚本处理超大图片。
SVG 图片解码后无法显示
SVG 是基于 XML 的矢量格式,解码后必须确保:1)MIME 类型使用 image/svg+xml;2)SVG 中不能含未转义的特殊字符;3)部分浏览器对 SVG 中的 JavaScript 代码有安全限制。建议先用 XML 解析工具验证 SVG 合法性。
术语表
- Base64
- 用 64 个 ASCII 字符表示二进制数据的编码方式,定义在 RFC 4648 中。本工具的逆向:把 Base64 字符串还原为原始图片二进制。
- Data URL
- RFC 2397 定义的内联 URL 格式:data:image/<MIME>;base64,<数据>。可直接在 HTML img src、CSS background-image 中使用。本工具自动识别并剥离前缀。
- MIME 类型
- 互联网媒体类型,如 image/png、image/jpeg。浏览器根据 MIME 决定如何解析字节流为图片。
- PNG
- 无损压缩位图格式,支持透明通道。常用于图标、截图、需要保留细节的图片。Base64 后体积约为原 1.33 倍。
- JPG/JPEG
- 有损压缩位图格式,适合照片。压缩率高但不支持透明。Base64 后体积约为原 1.33 倍。
- WebP
- Google 开发的现代图片格式,同时支持有损/无损压缩和透明通道。比 PNG/JPG 小 25-35%。
- Blob (Binary Large Object)
- 浏览器原生二进制对象,可包装 Base64 解码后的字节流为图片 Blob URL 用于预览和下载。
8 种图片格式对比表
不同图片格式有不同的压缩算法、特性、适用场景。
| 格式 | MIME 类型 | 压缩类型 | 透明支持 | 典型场景 |
|---|---|---|---|---|
PNG | image/png | 无损 | ✅ | 图标 / 截图 / Logo |
JPG | image/jpeg | 有损 | ❌ | 照片 / 风景图 |
WebP | image/webp | 有损/无损 | ✅ | 现代 Web 推荐 |
GIF | image/gif | 无损 (256色) | ✅ (1-bit) | 小动画 / 简单图标 |
SVG | image/svg+xml | 矢量 | ✅ | Logo / 图标 / 插画 |
BMP | image/bmp | 无 | 可选 | Windows 系统图 |
AVIF | image/avif | 有损/无损 | ✅ | 下一代图片格式 |
ICO | image/x-icon | 无损 | ✅ | 网站 favicon |
Data URL vs HTTP URL 图片加载对比
解码后的图片可作为 Data URL 直接嵌入到 HTML/CSS,与传统的 HTTP URL 对比。
| 维度 | Data URL | HTTP URL |
|---|---|---|
| HTTP 请求数 | 0 | 1 次 |
| 缓存复用 | 难 | 易(CDN / 浏览器) |
| 体积 | 原图 + 33% | 原图大小 |
| 适合大小 | < 10 KB | 任意大小 |
| 压缩传输 | 否(已编码) | gzip / Brotli |
| CSP 限制 | 可能 | 一般允许 |
| 服务器存储 | 无需 | 需要 |
| 离线访问 | ✅(文件级) | ❌(需缓存) |
5 种 Base64 转图片常见错误对照表
遇到解码错误时按下表快速定位问题。
| 错误现象 | 可能原因 | 解决方法 |
|---|---|---|
| 解码失败:InvalidCharacterError | 包含空格、换行、非 Base64 字符 | 用 Base64 Clean 工具预处理 |
| 图片显示空白 | MIME 类型与原数据不匹配 | 切换正确 MIME(如 PNG 数据用 image/png) |
| 图片显示不完整 | Base64 字符串被截断 | 重新获取完整 Base64 字符串 |
| Padding 报错 | URL-safe Base64 省略 padding | 用 Base64 Padding 工具补齐 = |
| 浏览器内存溢出 | 图片过大(> 50MB) | 分块解码或使用图片压缩工具 |
Authoritative References
- 安全字符串比较
- 二进制编码解码
- 凯撒密码
- 摩尔斯电码
- 十六进制编码解码
- 视频转 Base64
- Base64 转视频
- 图片转 Base64
- Base64 转图片
- 文本转 Base64
- Base64 转文本
- 文件哈希校验
- 文件转 Base64
- Base64 转文件
- 音频转Base64
- Base64转音频
- AES 加密解密
- DES 加密解密
- Base32 编码解码
- Base58 编码解码
- Base64 编码
- Base64 解码
- Base64 比较
- Base64 拆分
- Base64 多行合并
- Base64 格式化
- Base64 格式校验
- Base64 批量编码
- Base64 批量解码
- Base64 清理
- Base64 填充处理
- Base64 长度统计
- Base64 转十六进制
- Base64 DataURL 转换
- Base64-Hex 互转
- Base85 编码解码
- HMAC 生成与验证
- PBKDF2 密钥派生
- MD5 哈希值
- SHA-256 哈希
- SHA1 哈希
- SHA512 哈希
- JWT 解码、验证与生成
- HTML 编码解码
- Unicode 转义
- URL 编码
- URL Safe Base64
- MIME Base64
- Java 代码混淆
- JavaScript 代码混淆
- PHP 混淆
- Python混淆