在现代前端开发中，HTML5 的 Blob 对象为我们处理二进制数据提供了强大的支持。它不仅能够帮助我们高效地操作文件、图像、音视频等资源，还允许我们在浏览器端进行压缩、切片、转换等底层操作。
本文将带你从零开始，深入理解如何使用 Blob 对象 将一段 Base64 编码的图片数据还原为原始的二进制格式，并最终生成一个可以在网页上直接显示的 URL 地址。整个过程通俗易懂，代码解释详尽，适合初学者和进阶开发者阅读学习。
一、什么是 Blob？
Blob（Binary Large Object） 是 HTML5 中用于表示"不可变的原始二进制数据"的对象。你可以把它理解为一种"类文件"对象，它可以包含任意类型的数据，比如文本、图片、音频、视频等。
主要特点：
- 支持多种 MIME 类型（如
image/png,application/pdf等） - 可以进行切片（slice）、合并等操作
- 可以通过
URL.createObjectURL()创建临时访问地址
二、为什么要用 Blob 处理图像？
传统的图像加载方式通常是通过 <img src="url"> 加载服务器上的图片资源。但在某些场景下，我们需要处理的是 Base64 编码的图片字符串，例如：
- 图像上传前预览
- Canvas 导出图像数据
- 前端生成图像并动态展示
- 数据传输过程中嵌入图像信息
此时，我们可以利用 Blob 对象将 Base64 数据转换为浏览器可识别的图像资源，从而实现本地渲染或进一步操作。
三、从 Base64 到 Blob 的完整流程
1. 获取 Base64 编码的图像数据
假设你已经拥有一个 Base64 编码的图像字符串，通常是以如下形式出现：
text
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA...其中 iVBORw0KG... 是实际的 Base64 编码部分。为了简化演示，我们只保留编码部分：
javascript
const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAGQAAAA...'; // 实际应替换为有效Base64⚠️ 注意：如果你的 Base64 字符串前面带有
data:image/xxx;base64,这样的头部，请先去掉这部分再传给atob()。
2. 使用 atob 解码 Base64 数据
JavaScript 提供了内置函数 atob()，可以将 Base64 编码的字符串解码为原始的二进制字符串。
javascript
const binaryString = atob(base64String);这个 binaryString 是一个由字节组成的字符串，每个字符代表一个 0~255 之间的数值。
3. 转换为 Uint8Array（二进制数组）
为了更方便地操作这些字节数据，我们将上述字符串转换为 Uint8Array，这是一种专门用来存储无符号 8 位整数（即单个字节）的数组类型。
javascript
const byteArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
byteArray[i] = binaryString.charCodeAt(i); // 获取ASCII码值
}这一步是关键，因为只有 Uint8Array 才能被 Blob 正确接收并解析为图像数据。
4. 构建 Blob 对象
现在我们可以使用 Blob 构造函数创建一个 Blob 对象，并指定其 MIME 类型（例如 image/jpeg 或 image/png）：
javascript
const blob = new Blob([byteArray], { type: 'image/jpeg' });说明：
[byteArray]是数据源，是一个数组，可以包含多个ArrayBuffer或TypedArray{ type: 'image/jpeg' }指定了该 Blob 的 MIME 类型
5. 生成临时访问 URL
有了 Blob 对象后，我们就可以使用 URL.createObjectURL(blob) 方法生成一个指向它的临时 URL：
javascript
const imageUrl = URL.createObjectURL(blob);这个 URL 形如：
arduino
blob:https://yourdomain.com/abcd1234-5678-90ef-ghij它是浏览器内部维护的一个引用地址，非常适合用于图像预览、下载链接、Canvas 渲染等用途。
6. 在页面中展示图像
最后，我们只需将生成的 URL 设置为 <img> 标签的 src 属性即可：
html
<img id="blobImage" src="" alt="From Blob" />
javascript
document.getElementById('blobImage').src = imageUrl;这样，你的 Base64 图像就成功地被解析并显示在网页上了！
四、完整代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Blob 图像展示</title>
</head>
<body>
<h2>使用 Blob 显示 Base64 图像</h2>
<img id="blobImage" src="" alt="From Blob" />
<script>
const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAGQAAAA...'; // 替换为真实Base64数据
// 1. 解码 Base64 字符串
const binaryString = atob(base64String);
// 2. 转换为 Uint8Array
const byteArray = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
byteArray[i] = binaryString.charCodeAt(i);
}
// 3. 创建 Blob 对象
const blob = new Blob([byteArray], { type: 'image/jpeg' });
// 4. 创建临时 URL
const imageUrl = URL.createObjectURL(blob);
// 5. 显示图像
document.getElementById('blobImage').src = imageUrl;
</script>
</body>
</html>五、常见问题与注意事项
✅ 如何获取有效的 Base64 图像字符串？
你可以通过以下几种方式获取：
- 使用在线工具将图片转为 Base64
- 如： www.sojson.com/image2base6...
- 使用
<input type="file">读取用户上传的图片并通过FileReader读取为 Base64 - 使用 Canvas 的
.toDataURL()方法导出图像
❗ Base64 开头有 data: 部分怎么办？
例如：
text
data:image/png;base64,iVBORw0KG...请先截取逗号后面的部分：
javascript
const base64Data = base64String.split(',')[1];然后再传给 atob()。
❗ 出现乱码或图像无法显示怎么办？
可能是以下原因导致：
- Base64 字符串不完整或损坏
- MIME 类型与实际图像格式不符（如写成
image/jpeg但图像是 PNG） - 忘记去掉
data:image/xxx;base64,头部
六、Blob 的其他实用技巧
除了图像处理，Blob 还有很多高级用途：
| 功能 | 示例 |
|---|---|
| 下载文件 | window.open(URL.createObjectURL(blob)) |
| 分块处理大文件 | 使用 blob.slice(start, end) |
| 与服务端交互 | 可作为 FormData 添加并发送 |
| 音频/视频播放 | 生成 URL 后设置为 <audio> 或 <video> 的 src |
七、总结
通过本文的学习，你应该已经掌握了以下几个核心知识点：
✅ 如何将 Base64 图像字符串还原为二进制数据
✅ 如何使用 Uint8Array 和 Blob 构造图像对象
✅ 如何使用 URL.createObjectURL 生成图像链接并在页面中展示
✅ 掌握了 Blob 在前端图像处理中的强大功能
Blob 是现代 Web 开发中不可或缺的一部分，尤其在处理多媒体资源时非常有用。希望这篇文章能帮助你更好地理解和应用 HTML5 中的 Blob 技术。
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或分享给更多需要的朋友！🌟