Base64 Image Decoder
将Base64数据URI解码回可视图像
什么是Base64图像解码?
Base64图像解码是Base64图像编码的反向操作:它采用代表图像的Base64字符串或数据URI,并将其转换回可见的二进制像素数据。当您收到如data:image/png;base64,iVBORw0KGgo...的字符串时,解码会删除数据URI前缀,反转RFC 4648中定义的Base64编码,并重建原始图像字节。然后浏览器可以将解码的字节渲染为可见图像。
数据URI(RFC 2397)将MIME类型和Base64编码的内容打包成一个字符串。它们经常出现在API响应、HTML电子邮件源代码、CSS样式表和数据库记录中,其中图像存储为文本而不是二进制文件。解码这些字符串是必要的,以预览图像、验证其内容或将其另存为独立文件。由于Base64使用4个ASCII字符来表示每3个字节的二进制数据,编码的字符串始终比原始图像大约33%。
此工具解析完整的数据URI(data:image/png;base64,...)和没有data:前缀的原始Base64字符串。对于原始字符串,通过检查前几个Base64字符来自动检测图像格式,这些字符对应于文件的magic bytes——例如,iVBORw0KGgo始终表示PNG文件。解码的图像直接在浏览器中呈现,可以作为文件下载。
开发人员的常见场景是使用REST API,该API返回配置文件照片或文档缩略图作为JSON字段内的Base64字符串——例如,{}与图像。要使用该图像,您提取字段值,删除数据URI前缀直到逗号(包括逗号),然后通过JavaScript中的atob()或Python中的base64.b64decode()等解码器传递剩余的Base64字符以恢复原始字节。将完整值粘贴到此工具中会跳过所有这些手动步骤,并立即呈现图像。
为什么使用此Base64图像解码器?
此工具将Base64图像数据完全在您的浏览器中转换为可查看、可下载的图像——无需上传、无需服务器处理、无需帐户。
Base64图像解码用例
图像的数据URI结构
数据URI将图像类型和编码内容打包成一个字符串。每个组件对于正确解码都是必不可少的:方案(data:)表示URL是自包含的,而不是对外部资源的引用;MIME类型(例如image/png)告诉渲染器在解释原始字节时使用什么格式;标记;base64,将Base64编码的内容与对纯文本格式使用百分比编码的数据URI区分开来。Base64有效负载本身可能以一个或两个填充字符=结尾——当输入字节数不是三的倍数时,这些是必需的,确保编码长度始终是四的倍数。省略或截断这些组件中的任何一个都会导致解码失败或生成损坏的图像。
| 成分 | 描述 |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type declaring the image format |
| ;base64, | Encoding declaration (always base64 for binary) |
| iVBORw0KGgo... | Base64-encoded pixel data |
从Base64检测图像格式
当Base64字符串没有data:前缀时,可以通过检查前几个字符来识别图像格式。这些字符对应于文件的magic bytes——每个图像文件开头的固定字节序列,用于识别格式:
| 格式 | Base64前缀 | 十六进制签名 | MIME类型 |
|---|---|---|---|
| PNG | iVBORw0KGgo | 89 50 4E 47 | image/png |
| JPEG | /9j/ | FF D8 FF | image/jpeg |
| GIF | R0lGOD | 47 49 46 38 | image/gif |
| WebP | UklGR | 52 49 46 46 | image/webp |
| SVG | PHN2Zy | 3C 73 76 67 (text) | image/svg+xml |
| BMP | Qk | 42 4D | image/bmp |
| ICO | AAABAA | 00 00 01 00 | image/x-icon |
代码示例
如何在流行的语言和环境中将Base64图像字符串解码回图像文件:
// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Method 1: fetch API (simplest)
const res = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048
// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime = header.match(/:(.*?);/)[1] // → "image/png"
const binary = atob(b64)
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2 = new Blob([bytes], { type: mime })
// Create a download link
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)import base64
import re
data_uri = 'data:image/png;base64,iVBORw0KGgo...'
# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1) # → "image/png"
b64_data = match.group(2)
# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')
with open(f'output.{ext}', 'wb') as f:
f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)
# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)import { writeFileSync } from 'fs'
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1] // → "image/png"
// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)
// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47> (\x89PNG)
// JPEG → <Buffer ff d8 ff e0># Decode a raw Base64 string to an image file (Linux) echo 'iVBORw0KGgo...' | base64 -d > output.png # Decode a raw Base64 string to an image file (macOS) echo 'iVBORw0KGgo...' | base64 -D > output.png # Extract Base64 from a data URI and decode echo 'data:image/png;base64,iVBORw0KGgo...' | \ sed 's/^data:.*base64,//' | base64 -d > output.png # Identify the image format from the decoded file file output.png # → output.png: PNG image data, 64 x 64, 8-bit/color RGBA