Base64 转 PNG

把 Base64 文本还原为真正的 PNG 文件。粘贴纯字符串或 data:image/png;base64 URI,连同透明效果一起预览,可以原样保存,也可以把其他格式转换为 PNG。

完全在浏览器中运行,不会上传任何数据。

使用方法

  1. 粘贴 Base64 字符串或完整的 data:image/png;base64 URI。
  2. 查看预览,透明区域会显示在棋盘格背景上。
  3. 下载格式保持为 PNG。如果数据是 JPEG、WebP 等其他格式,会在浏览器中转换为 PNG。
  4. 下载 .png 文件。

Base64 PNG 通常来自哪里

PNG 是最常以 Base64 形式出现的图片格式。不带参数调用 canvas.toDataURL() 返回的就是 PNG data URI;浏览器自动化工具也会把截图作为 Base64 PNG 返回,例如 Puppeteer 的 page.screenshot({ encoding: 'base64' }) 和 Selenium 的 get_screenshot_as_base64()。图表渲染服务、二维码生成器和图像生成接口也经常在 JSON 中用 Base64 字段返回图片。

PNG 字符串很好辨认:它总是以 iVBORw0KGgo 开头,这是以 89 50 4E 47 起始的 8 字节 PNG 签名的编码结果。紧随其后的 AAAANSUhEUg 是 IHDR 数据块的开头,其中记录了图片的宽度和高度。

从 JSON 中复制出来的字符串最好先检查一下。例如 PHP 的 json_encode 默认会转义正斜杠,所以 PHP 接口返回的 PNG 可能带有 \/。粘贴前请把它们替换为 /,并去掉两侧的引号。

为什么保存为 PNG

PNG 采用无损压缩,并带有完整的 Alpha 通道,柔和的阴影和抗锯齿边缘都能完整保留。因此它非常适合截图、界面元素、示意图以及包含文字的图片。如果是照片,JPG 或 WebP 的文件会小得多。

把 JPEG 或 WebP 转成 PNG 会如实保留屏幕上看到的内容,但无法找回有损压缩已经丢掉的细节,而且生成的 PNG 通常比原文件更大。

在代码中保存 Base64 PNG

# Python
import base64
with open('screenshot.png', 'wb') as f:
    f.write(base64.b64decode(b64_string))

// 浏览器:把 data URI 转为 Blob,无需手动解码
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);

需要反向操作?PNG 转 Base64 可以把文件编码为字符串或 data URI。

常见问题

怎样判断一个 Base64 字符串是不是 PNG?
PNG 数据总是以 iVBORw0KGgo 开头。本工具还会直接读取签名字节,即使 data URI 中声明的是其他类型,也能报告真实格式。
转换为 PNG 会降低画质吗?

不会。PNG 是无损格式,像素会按照浏览器解码的结果原样保存。唯一的损失只可能来自源文件本身此前的压缩。

透明背景会保留吗?

会。PNG 输出会保留完整的 Alpha 通道。选择 JPEG 时透明区域会填充为白色,选择 GIF 时每个像素只能是完全透明或完全不透明。

PNG data URI 显示为破损图片是什么原因?
通常是字符串被截断了。表格单元格(Excel 最多 32,767 个字符)、日志行和数据库字段经常会截断过长的内容。另外,粘贴前请去掉两侧的引号以及 \/ 之类的 JSON 转义。