首页/文章/javascript

Blob 居然这么强大

2025-08-18

1772 字约 6 分钟

...

学习

一、什么是 Blob？

Blob（Binary Large Object）是 HTML5 提供的一个用于表示不可变的、原始二进制数据块的对象。

特点：

不可变性：一旦创建，内容不能修改。
可封装任意类型的数据：字符串、ArrayBuffer、TypedArray 等。
支持 MIME 类型描述，方便浏览器识别用途。

示例：

const blob = new Blob(['Hello World'], { type: 'text/plain' });

二、Base64 编码的前世今生

虽然名字听起来像是某种“64进制”，但实际上它是一种编码方式，不是数学意义上的“进制”。

起源背景：

Base64 最早起源于电子邮件协议 MIME（Multipurpose Internet Mail Extensions），因为早期的电子邮件系统只能传输 ASCII 文本，不能直接传输二进制数据（如附件）。于是人们发明了 Base64 编码方法，把二进制数据转换成文本形式，从而安全地在网络上传输。

使用场景：

场景	说明
图片嵌入到 HTML/CSS 中	Data URI 方式减少请求
JSON 数据中传输二进制信息	如头像、加密数据等
WebSocket 发送二进制消息	避免使用 ArrayBuffer
二维码生成	将图像转为 Base64 存储

！！！注意：Base64 并非压缩算法，它会将数据体积增加约 33%。

三、从 Base64 到 Blob 的全过程

1. Base64 字符串解码：`atob()`

JavaScript 提供了一个内置函数 atob()，可以将 Base64 字符串解码为原始的二进制字符串（ASCII 表示）。

const base64Data = 'SGVsbG8gd29ybGQh'; 
const binaryString = atob(base64Data);

！！！返回的是 ASCII 字符串，不是真正的字节数组。

2. 构建 Uint8Array（字节序列）

为了构造 Blob，我们需要一个真正的字节数组。我们可以用 charCodeAt() 将每个字符转为对应的 ASCII 数值（即 0~255 的整数）。

const byteArray = new Uint8Array(binaryString.length);

for (let i = 0; i < binaryString.length; i++) {
    byteArray[i] = binaryString.charCodeAt(i);
}

现在，byteArray 是一个代表原始图片二进制数据的数组。

3. 创建 Blob 对象

有了字节数组，就可以创建 Blob 对象了：

const blob = new Blob([byteArray], { type: 'image/png' });

这个 Blob 对象就代表了一张 PNG 图片的二进制内容。

4. 使用 URL.createObjectURL() 显示图片

为了让浏览器能够加载这个 Blob 对象，我们需要生成一个临时的 URL 地址：

const imageUrl = URL.createObjectURL(blob);
document.getElementById('blobImage').src = imageUrl;

这样，你就可以在网页中看到这张图片啦！

四、Blob 的核心功能与应用场景

功能	说明
分片上传	`.slice(start, end)` 方法可用于大文件切片上传
本地预览	Canvas.toBlob() 导出图像，配合 URL.createObjectURL 预览
文件下载	使用 a 标签 + createObjectURL 实现无刷新下载
缓存资源	Service Worker 中缓存 Blob 数据提升性能
处理用户上传	结合 FileReader 和 File API 操作用户文件

五、Blob 的高级玩法

1. 文件切片上传（分片上传）

const chunkSize = 1024 * 1024; 
const firstChunk = blob.slice(0, chunkSize);

2. Blob 转换为其他格式

FileReader.readAsText(blob) → 文本
FileReader.readAsDataURL(blob) → Base64
FileReader.readAsArrayBuffer(blob) → Array Buffer

3. Blob 下载为文件

const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'example.png';
a.click();

六、相关知识点汇总

技术点	作用
Base64	将二进制数据编码为文本，便于传输
atob()	解码 Base64 字符串，还原为二进制字符串
charCodeAt()	获取字符的 ASCII 值（0~255）
Uint8Array	构建字节数组，表示原始二进制数据
Blob	封装二进制数据，作为文件对象使用
URL.createObjectURL()	生成临时地址，让浏览器加载 Blob 数据

🧾 七、完整代码回顾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Blob 实战</title>
</head>
<body>
  <img src="" id="blobImage" width="100" height="100" alt="Blob Image" />

  <script>
    const base64Data = 'UklGRiAHAABXRUJQVlA4IBQHAACwHACdASpQAFAAPok0lEelIyIhMziOYKARCWwAuzNaQpfW+apU37ZufB5rAHqW2z3mF/aX9o/ev9LP+j9KrqSOfp9mf+6WmE1P1yFc3gTlw8B8d/TebelHaI3mplPrZ+Aa0l5qDGv5N8Tt9vYhz3IH37wqm2al+FdcFQhDnObv2+WfpwIZ+K6eBPxKL2RP6hiC/K1ZynnvVYth9y+ozyf88Obh4TRYcv3nkkr43girwwJ54Gd0iKBPZFnZS+gd1vKqlfnPT5wAwzxJiSk+pkbtcOVP+QFb2uDqUhuhNiHJ8xPt6VfGBfUbTsUzYuKgAP4L9wrkT8KU4sqIHwM+ZeKDBpGq58k0aDirXeGc1Odhvfx+cpQaeas97zVTr2pOk5bZkI1lkF9jnc0j2+Ojm/H+uPmIhS7/BlxuYfgnUCMKVZJGf+iPM44vA0EwvXye0YkUUK...';

    const binaryString = atob(base64Data); 
    const byteArray = new Uint8Array(binaryString.length); 

    for (let i = 0; i < binaryString.length; i++) {
        byteArray[i] = binaryString.charCodeAt(i); 
    }

    const blob = new Blob([byteArray], { type: 'image/png' }); 
    const imageUrl = URL.createObjectURL(blob); 

    document.getElementById('blobImage').src = imageUrl; 
  </script>
</body>
</html>

八、扩展阅读建议

九、结语

Blob 是连接 JavaScript 世界与真实二进制世界的桥梁，是每一个想要突破瓶颈的前端开发者必须掌握的核心技能之一。掌握了 Blob，你就拥有了操作二进制数据的能力，这在现代 Web 开发中是非常关键的一环。下次当你看到一张图片在网页中加载出来，或者一个文件被顺利下载时，不妨想想：这一切的背后，都有 Blob 的身影。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

更多文章 →

javascript2026-02-24

navigator.sendBeacon全指南

在前端开发中，埋点系统是必不可少的一环。我们经常需要在用户关闭页面、刷新或跳转路由时，向服务器发送最后一条统计数据（比如用户停留时长、页面跳出率）。但这看似简单的需求，在实现时却危机四伏：请求发不出去？页面跳转卡顿？今天我们就来聊聊这个问题的终极解决方案 —— 。一、痛点与传统方案的挣扎场景还原当用户点击关闭按钮时，浏览器会触发生命周期事件（或）。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求，浏览...

学习

javascript2025-11-02

理解浏览器事件系统,从用户点击到事件对象的完整旅程

深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象作为前端开发者，我们每天都在写这样的代码：这段代码如此熟悉，以至于我们很少停下来思考：这个对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？更神奇的是，当我们手动创建事件时：...

学习

javascript2025-10-01