Base64 转图片

Base64 输入0 字符

免费在线将 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 图片还原为本地文件查看

使用方法

  1. 粘贴 Base64 编码的图片数据(支持带或不带 Data URL 前缀,如 data:image/png;base64,iVBORw0KG...)
  2. 工具自动检测 MIME 类型并解码(在 Data URL 中识别,或根据内容头嗅探)
  3. 右侧实时显示图片预览和文件大小、尺寸信息
  4. 点击「下载」保存为本地图片文件,或右键图片「图片另存为」
  5. 如解码失败,可手动指定 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 库解码并保存图片

python

Python 标准库 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 解码图片

java

Java 标准库 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 类型压缩类型透明支持典型场景
PNGimage/png无损图标 / 截图 / Logo
JPGimage/jpeg有损照片 / 风景图
WebPimage/webp有损/无损现代 Web 推荐
GIFimage/gif无损 (256色)✅ (1-bit)小动画 / 简单图标
SVGimage/svg+xml矢量Logo / 图标 / 插画
BMPimage/bmp可选Windows 系统图
AVIFimage/avif有损/无损下一代图片格式
ICOimage/x-icon无损网站 favicon

Data URL vs HTTP URL 图片加载对比

解码后的图片可作为 Data URL 直接嵌入到 HTML/CSS,与传统的 HTTP URL 对比。

维度Data URLHTTP URL
HTTP 请求数01 次
缓存复用易(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