JavaScript 利用 Base64 与 Blob 生成图片 URL 的方法
本文介绍如何在浏览器中使用 JavaScript 将 Base64 编码字符串转换为 Blob 对象，并通过 URL.createObjectURL 生成指向该对象的临时 URL。通过具体代码示例，展示如何利用 img 标签的 src 属性加载并显示图像，实现前端图片资源的动态处理与展示。
有时在网站的图片 src 属性中会看到类似 blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d 的地址。这种图片加载方式是如何实现的呢？本文将讲解在浏览器环境中，如何利用 JavaScript 解析 Base64 编码并结合 Blob 对象技术来实现这一过程，以下是具体的实现步骤及相关示例代码。
1. 将 Base64 编码字符串转换为 Blob 对象
利用 atob() 函数将 Base64 编码字符串解码为二进制数据，随后将其封装为 Blob 对象。
// 示例1：将Base64编码字符串转换为Blob对象
const base64 = 'data:image/png;base64,iVBORw0KG...';
const byteCharacters = atob(base64.split(',')[1]);
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' });
2. 将 Blob 对象转换为 URL 地址
调用 createObjectURL() 函数，将生成的 Blob 对象转换为一个有效的 URL 地址。
// 示例2：将Blob对象转换为URL地址
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url); // 输出blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d
3. 使用 URL 地址显示图像
将生成的 URL 地址赋值给 img 标签的 src 属性，即可在浏览器中正常显示图像。
<!-- 示例3：使用URL地址显示图像 -->
<img src="blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d" alt="Hello, World!">
综合上述三个步骤，我们便可以在浏览器中完成对 Base64 编码图像的解析与展示。
至此，关于 JavaScript 使用 Base64 编码和 Blob 对象生成图像 URL 地址的介绍到此结束。如需了解更多关于 Js 用 Base64 和 Blob 加密图像 URL 的内容，请搜索本站历史文章或继续浏览下方的相关文章，感谢大家的支持！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38