标签导航：

如何用JavaScript将Base64图片转换为浏览器可访问的URL？

在浏览器中直接使用base64图片：javascript实现

本文介绍如何利用JavaScript将Base64编码的图片转换为浏览器可直接访问的URL，无需服务器端上传。这种方法尤其适用于不需要永久存储图片的场景。

方法：

第一步：Base64解码为Blob对象

首先，使用window.atob()函数将Base64字符串解码为原始二进制数据。然后，使用Blob对象将解码后的数据封装成一个二进制大对象。

第二步：创建Object URL

使用URL.createObjectURL()方法为生成的Blob对象创建一个临时的URL。这个URL就像普通的图片URL一样，可以被浏览器直接访问。

代码示例：

const base64String = 'data:image/png;base64,iVBORw0KGgo...'; // 替换为你的Base64字符串

const byteCharacters = window.atob(base64String.split(',')[1]); //去除data:image/png;base64,
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' }); //根据你的图片类型调整
const url = URL.createObjectURL(blob);

// 使用生成的url
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

重要提示：

由URL.createObjectURL()生成的URL是临时的。关闭标签页或浏览器后，该URL将失效。 如果需要永久保存图片，则必须使用服务器端存储方案，例如AWS S3或Google Cloud Storage。