前端高手才知道的秘密:Blob 居然这么强大!

🔍 一、什么是 Blob?

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

✨ 特点:

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

💡 示例:

javascript 复制代码
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 表示)。

javascript 复制代码
const base64Data = 'SGVsbG8gd29ybGQh'; // "Hello world!"
const binaryString = atob(base64Data);

⚠️ 返回的是 ASCII 字符串,不是真正的字节数组。


2. 构建 Uint8Array(字节序列)

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

javascript 复制代码
const byteArray = new Uint8Array(binaryString.length);

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

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


3. 创建 Blob 对象

有了字节数组,就可以创建 Blob 对象了:

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

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


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

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

javascript 复制代码
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. 文件切片上传(分片上传)

javascript 复制代码
const chunkSize = 1024 * 1024; // 1MB
const firstChunk = blob.slice(0, chunkSize);

2. Blob 转换为其他格式

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

3. Blob 下载为文件

javascript 复制代码
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 数据

🧾 七、完整代码回顾

html 复制代码
<!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); // Base64 解码
    const byteArray = new Uint8Array(binaryString.length); // 创建 Uint8Array

    for (let i = 0; i < binaryString.length; i++) {
        byteArray[i] = binaryString.charCodeAt(i); // 填充字节数据
    }

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

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

📚 八、扩展阅读建议


🧩 九、结语

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

相关推荐
拾光拾趣录11 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲18 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃27 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军28 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子31 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游31 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子33 分钟前
智能前端实践之 shot-word demo
前端
归于尽33 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810133 分钟前
vite 插件
前端
无数山36 分钟前
autorelease pool
前端