Base64图片转URL，JS实用小技巧

本文介绍了利用JavaScript将Base64编码的图片转换为浏览器可直接使用的URL的实用技巧，无需服务器端上传，节省资源并方便快捷。通过`window.atob()`解码Base64字符串，将其转换为Blob对象，再利用`URL.createObjectURL()`生成临时URL，即可直接在页面中显示图片。此方法适用于不需要永久存储图片的场景，但需注意生成的URL是临时的，关闭页面后失效。 关键词：Base64图片, JavaScript, URL, 图片转换, Blob对象, createObjectURL

在浏览器中直接使用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。

理论要掌握，实操不能落！以上关于《Base64图片转URL，JS实用小技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！