轻松实现base64图片到url的转换
本文介绍如何利用JavaScript将Base64编码的图片转换为可直接使用的URL，方便快捷地访问图片资源。
方法详解：
-
解码Base64数据： 首先，使用
window.atob()函数将Base64字符串解码为二进制数据。 -
创建Blob对象： 将解码后的二进制数据转换为Blob对象，Blob对象表示不可变的原始数据的类文件对象。
立即学习“Java免费学习笔记（深入）”；
-
生成临时URL： 利用
URL.createObjectURL()函数，为生成的Blob对象创建一个临时的URL。这个URL可以在浏览器中直接作为图片的src属性使用。
代码示例：
const base64Image = '...'; // 你的Base64编码图片字符串
const binaryData = window.atob(base64Image);
const byteNumbers = new Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
byteNumbers[i] = binaryData.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.revokeObjectURL(url)释放资源，避免内存泄漏。 - 如果需要持久化的URL，则必须将图片上传到服务器，并获取服务器返回的URL。阿里云OSS等云存储服务虽然支持Base64图片上传，但通常需要自行编写代码处理上传和获取URL的过程。 直接使用Base64图片数据在网页中显示，会占用较大的内存，尤其对于大尺寸图片。
希望以上信息对您有所帮助！
