在前端开发中，后端经常以Base64编码的形式返回图片数据，例如头像、验证码或截图。如果直接在页面展示，看似只要赋值给img即可，但要做裁剪、下载或进一步加工，就必须把Base64数据解析成标准的图片资源。下面通过四个清晰步骤，说明如何用原生JavaScript完成这一过程。
第一步：识别并剥离Base64前缀
后端传来的Base64图片通常带有数据头，形如data:image/png;base64,。这部分不是图像本身的编码，只是元信息。如果直接拿去解码，会得到错误结果。我们需要先判断字符串是否包含逗号，并把前缀去掉，只保留真正的编码内容。
可以用正则或简单的字符串分割来处理。下面这个函数会返回纯Base64字符串，并顺便告诉你图片类型，方便后面生成Blob时设置MIME。
function parseBase64(input) {
// 判断是不是带 data URI 前缀
if (input.indexOf('data:') === 0) {
var commaIndex = input.indexOf(',');
var meta = input.substring(0, commaIndex); // 例如 data:image/png;base64
var base64 = input.substring(commaIndex + 1);
var mimeMatch = meta.match(/data:([^;]+);/);
var mime = mimeMatch ? mimeMatch[1] : 'image/png';
return { base64: base64, mime: mime };
}
// 没有前缀就假定是 png
return { base64: input, mime: 'image/png' };
}
这种处理方式的优点是兼容性强，无论接口返回的是完整data URI还是裸编码都能用。缺点是如果后端传了其他资源的Base64（比如PDF），需要额外判断mime类型，避免误当成图片。
第二步：将Base64解码为二进制数据
浏览器提供了atob函数，能把Base64字符串解码成二进制字符串。但字符串里的每个字符其实对应一个字节，我们需要进一步转成真正的字节数组，也就是Uint8Array，这样才能交给Blob使用。
下面代码演示如何把上一步拿到的base64转成Uint8Array。核心是先atob，再逐字符取charCodeAt，填入数组。
function base64ToBytes(base64) {
var binary = atob(base64);
var length = binary.length;
var bytes = new Uint8Array(length);
for (var i = 0; i < length; i++) {
bytes[i] = binary.charCodeAt(i);
}
return bytes;
}
这里要注意，atob是同步方法，对超大图片（几兆以上）会短暂阻塞主线程。如果项目里常处理大图，可以考虑用fetch加blob方案替代。但普通业务图片完全够用，而且代码直观，方便维护。
第三步：用Blob构造图片对象
拿到字节数组后，就可以用Blob构造函数包装成二进制大对象，并指定对应的MIME类型。Blob是浏览器原生表示的不可变原始数据，它能作为图片、文件等资源被各种API消费。
接着调用URL.createObjectURL为这个Blob生成一个临时的内存地址。这个地址可以直接赋给img的src，也能用于canvas绘制或a标签下载。示例如下：
function base64ToObjectURL(input) {
var parsed = parseBase64(input);
var bytes = base64ToBytes(parsed.base64);
var blob = new Blob([bytes], { type: parsed.mime });
var url = URL.createObjectURL(blob);
return url;
}
使用Blob URL的好处是，图片不再以超长字符串形式存在于DOM里，而是独立资源，内存和渲染效率更好。但要注意，生成的URL在页面关闭前不会自动释放，若频繁创建需调用URL.revokeObjectURL回收，否则会造成内存泄漏。
第四步：渲染图片并释放资源
最后一步就是把生成的地址显示出来，并在不需要时清理。我们可以动态创建img元素，也可以直接操作页面上已有的标签。下面给出一个完整示例，包含显示和释放。
var base64Str = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMBAQAY3Y2wAAAAAElFTkSuQmCC';
var imgUrl = base64ToObjectURL(base64Str);
var img = document.createElement('img');
img.src = imgUrl;
img.onload = function() {
document.body.appendChild(img);
// 图片加载完成后即可释放URL
URL.revokeObjectURL(imgUrl);
};
在上面代码中，图片插入页面后，onload触发就立刻撤销了ObjectURL。这样既完成了显示，又避免了地址堆积。如果还要用canvas处理这张图，可以在revoke之前先drawImage，否则画布会拿不到数据。
整体来看，四步流程分别是去前缀、解码、转Blob、渲染。相比直接写src，这种写法在需要扩展功能时更灵活，也更符合前端资源管理的规范。日常对接返回Base64的接口时，建议封装成通用函数，减少重复代码。
JavaScriptBase64图片解析修改时间：2026-08-06 07:30:25