图片转Base64

上传图片

拖入图片，或点击选择文件

支持 PNG、JPG、GIF、WebP、BMP、SVG 等常见图片格式。

文件名 未选择

文件大小 -

MIME 类型 -

Base64 长度 -

转换结果

Data URL

纯 Base64

调用方式说明

1. 在 HTML 中直接显示图片

适合把生成后的 Data URL 直接放进 img 标签的 src 属性中。

<img src="proxy.php?url=data:image/png;base64,你的Base64内容" alt="示例图片">

2. 在 CSS 中作为背景图使用

适合小图标、按钮背景或内联装饰图，建议仅用于体积较小的图片。

.icon {
    background-image: url("data:image/png;base64,你的Base64内容");
    background-size: contain;
    background-repeat: no-repeat;
}

3. 在 JavaScript 中动态赋值

如果前端拿到的是接口返回的 Base64，可以先补全前缀再赋值给图片元素。

const base64 = "你的Base64内容";
const imageUrl = "data:image/png;base64," + base64;
document.getElementById("preview").src = imageUrl;

4. 作为接口参数上传

有些接口只接受纯 Base64，不需要 data:image/png;base64, 这一段前缀，提交前先确认接口文档。

{
    "file_name": "example.png",
    "image_base64": "你的Base64内容"
}

5. 使用注意事项

Base64 编码后体积通常会比原文件增大约三分之一。大图不适合直接内联到 HTML 或 CSS，容易影响页面加载和缓存效率。

优先建议：
小图标、小缩略图：可以直接使用 Data URL
大图片、内容图：建议保留原始图片 URL，不要转成超长 Base64

图片转 Base64 编码

上传图片后，浏览器会在本地直接读取文件并生成 Base64 结果，不经过服务器。页面同时提供完整 Data URL 和纯 Base64 文本，方便用于 HTML、CSS、接口参数或调试。

欢迎关注微信公众号：诚华便民查询

1、长按上方二维码，保存至手机相册；
2、进微信扫一扫，从相册中选择识别二维码。