在线 Base64 转图片工具：将编码字符串还原为图片文件

encode2026-07-252 分钟阅读

什么是 Base64 转图片

Base64 转图片是将 Base64 编码的文本字符串还原为二进制图片文件的过程。它是「图片转 Base64」的逆操作。

一个典型的 Base64 图片字符串以 Data URI 前缀开头：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
^^^      ^^^^        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
协议     MIME类型     Base64 编码的图片数据

为什么需要 Base64 转图片

API 响应处理：后端返回 Base64 图片数据，前端需要保存为图片
浏览器缓存：将内联的 Base64 图片提取为独立文件
数据迁移：从数据库中提取 Base64 存储的图片
邮件处理：解析邮件中的 Base64 附件
截图保存：HTML Canvas 截图的 Base64 数据保存为文件
日志分析：从日志中提取 Base64 编码的图片

如何使用在线工具

使用 DevToolkit Pro 的 Base64 转图片工具：

粘贴 Base64 编码字符串
支持带或不带 Data URI 前缀
自动检测图片格式（PNG、JPEG、GIF 等）
预览还原后的图片
一键下载为图片文件

代码中的 Base64 转图片

JavaScript（浏览器端）

function base64ToImage(base64String) {
  // 移除 Data URI 前缀
  const base64 = base64String.replace(/^data:image\/\w+;base64,/, '');
  // 解码为二进制
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  // 创建 Blob 并下载
  const blob = new Blob([bytes], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'image.png';
  a.click();
}

Node.js

const fs = require('fs');

function base64ToImage(base64String, outputPath) {
  const base64 = base64String.replace(/^data:image\/\w+;base64,/, '');
  const buffer = Buffer.from(base64, 'base64');
  fs.writeFileSync(outputPath, buffer);
  console.log(`图片已保存到 ${outputPath}`);
}

// 使用
base64ToImage('data:image/png;base64,iVBORw0KGgo...', 'output.png');

Python

import base64

def base64_to_image(base64_string, output_path):
    # 移除 Data URI 前缀
    if ',' in base64_string:
        base64_string = base64_string.split(',')[1]
    # 解码并保存
    image_data = base64.b64decode(base64_string)
    with open(output_path, 'wb') as f:
        f.write(image_data)

常见 MIME 类型

| MIME 类型 | 说明 | 文件扩展名 | |-----------|------|-----------| | image/png | PNG 图片 | .png | | image/jpeg | JPEG 图片 | .jpg / .jpeg | | image/gif | GIF 动图 | .gif | | image/webp | WebP 图片 | .webp | | image/svg+xml | SVG 矢量图 | .svg | | image/bmp | BMP 位图 | .bmp |