Base64 到图像转换器
将 Base64 字符串转换为具有即时实时预览的图像，下载为 PNG、JPG 或 WebP，或将图像直接复制到剪贴板。两种方式转换 — Base64 到图像和图像到 Base64。
在左侧粘贴 Base64 字符串以渲染预览
什么是 Base64 到图像转换？
Base64 是 RFC 4648. It takes binary data—such as image bytes representing PNG, JPEG, SVG, WebP, or GIF files—and translates it into a string of ASCII characters using a set of 64 characters (A-Z, a-z, 0-9, +, /, with = for padding).
将此文本表示形式解码回浏览器、操作系统和图像查看器可以显示和保存的二进制图形。通过将图像作为 Base64 数据 URI 直接嵌入到 HTML、CSS、JSON 或电子邮件中，开发人员可以消除外部 HTTP 请求并内联捆绑图像 Base64 到图像 图像数据 URI 的结构
标准 Base64 图像字符串的格式为
数据 URL data:[
data:image/pngimage/png,image/jpeg,image/webp,image/svg+xml;base64,;base64,— 图像文件的 Base64 编码的二进制字节。<data>1. JavaScript（浏览器）
复制
2. Node.js
3. Python 3
// Convert Base64 string to an HTMLImageElement
function base64ToImage(base64String) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = base64String.startsWith('data:')
? base64String
: `data:image/png;base64,${base64String}`;
});
}
// Convert Base64 string to a Blob for download or uploading
function base64ToBlob(base64String, mimeType = 'image/png') {
const raw = base64String.replace(/^data:[^;]+;base64,/, '');
const byteCharacters = atob(raw);
const byteNumbers = new Uint8Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
return new Blob([byteNumbers], { type: mimeType });
}
常见用例
const fs = require('fs');
function saveBase64Image(base64String, outputPath) {
// Strip data URI prefix if present
const base64Data = base64String.replace(/^data:image\/\w+;base64,/, '');
const buffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync(outputPath, buffer);
console.log(`Saved image to ${outputPath}`);
}
🚀 Web 性能和关键 CSS
import base64
import re
def base64_to_image(b64_string, output_filename='output.png'):
# Remove data:image/...;base64, header if present
data = re.sub('^data:image/.+;base64,', '', b64_string)
image_bytes = base64.b64decode(data)
with open(output_filename, 'wb') as f:
f.write(image_bytes)
# Usage
base64_to_image("iVBORw0KGgo...", "photo.png")
在 CSS 中直接嵌入小图标和启动徽标可避免额外的往返 HTTP 请求，从而减少首次内容绘制 (FCP) 时间
<?php
function base64ToImage($base64String, $outputFile) {
$data = explode(',', $base64String);
$binaryData = base64_decode(end($data));
file_put_contents($outputFile, $binaryData);
}
?>
✉️ HTML 电子邮件通讯。
将品牌徽标嵌入为内联数据 URI 可防止电子邮件客户端阻止远程图像或显示损坏的图像占位符框。
📡 REST API 和 WebSockets
当通过 JSON 负载传输图像快照或签名且分段上传不方便时，Base64 是行业标准。
🎨 Canvas 和屏幕截图导出
HTML5 Canvas 通过
canvas.toDataURL() 导出绘图和图表图形
常见问题 (FAQ)
HTML5 Canvas exports drawings and chart graphics via canvas.toDataURL() as Base64 images for quick downloading or sharing.
支持哪些图像格式？
我们的转换器支持所有现代光栅和矢量图像格式： PNG (
image/gif
image/bmp
Our converter supports all modern raster and vector image formats: PNG (image/png), JPEG/JPG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), and ICO (image/x-icon).
MD5 哈希生成器
SHA哈希生成器