" 当Base64遇上Blob，图像转换不再神秘，让你的网页瞬间变身魔法画布！ "

在现代前端开发中，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 技术。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或分享给更多需要的朋友！🌟