🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏

WildBlue
448 阅读5分钟

💡 程序员破冰

女朋友："你平时都干啥？"
程序员："写Blob！"
女朋友："什么？Blob是什么鬼？"
程序员："...我需要解释_Blob_是什么吗？"
程序员："Blob（Binary Large Object，二进制大对象）是 HTML5 中用于处理二进制数据的对象。它可以用来表示不可变的原始数据，比如图片、音频、视频、文件等。Blob 允许你在前端以二进制的方式操作数据，比如切割、合并、压缩等。 简单来说，Blob 就像一个“二进制文件容器”，你可以把任意二进制数据放进去，然后用 JavaScript 进行处理。常见的用法有： 将图片、音频、视频等文件转成 Blob 对象，方便前端处理或上传。 用 new Blob([数据], {type: '类型'}) 创建一个 Blob 对象。 用 URL.createObjectURL(blob) 为 Blob 创建一个临时的访问 URL，可以直接在页面上预览或下载。 可以通过 FileReader、fetch、XMLHttpRequest 等 API 读取或传输 Blob 数据。"

Blob 的主要作用就是让前端可以像操作文件一样操作二进制数据，非常适合做文件上传、下载、预览、图片处理等场景。 "

🌟 技术直男版 vs 白话版 对照表

技术概念技术直男版生活白话版🎯 类比强化
Base64编码ASCII字符到二进制的转换算法超市里的糖果厂：把所有东西都包成糖纸✨糖果厂：万物皆可糖衣包裹
atob()函数Base64字符串解码函数拆快递：把压缩包还原成实物📦快递站：解冻你的数字冰淇淋
Uint8Array8位无符号整型数组数字乐高积木：每块积木代表0-255的数字🧱数字积木：0~255的彩色方块
Blob对象二进制大数据容器魔法沙漏：装着所有数字积木的沙漏⏳沙漏：装满数字的神奇玻璃瓶
ObjectURL浏览器内存中的临时URL停车场临时车位：只在当前会话有效🚗停车场：给你一个临时停车位
二进制操作价值支持文件切割/修改/压缩乐高改造大师：可以任意拆改积木🔧工具箱：让数字积木变身新玩具

🧪 实战案例：老板的图片预览需求

image.png

🎬 场景重现

老板怒吼.jpg："用户上传的图片怎么在线预览？！"
你颤抖着敲下代码，希望用Blob拯救世界！ image.png

✅ 四步通关秘籍

image.png

第一步：Base64解码（解冻冰淇淋）

image.png

// 🧊 解冻base64冰淇淋
const base64Data = atob('iVBORw0KGgoAAAANSUhEUgAAASwAAACCCAMAAADQNkiAAAAA1BMVEX///+nxBvIAAAAO0lEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBb8Q8AAa0jZQAAAABJRU5ErkJggg==')

🔍 代码显微镜：
atob()就像打开快递站的压缩包，把加密的字符串还原成原始的"数字积木"。每块积木都是0-255的数字，准备堆砌成图片城堡！

第二步：构建字节数组（数字小山）

image.png

// 🧱 把积木堆成数字小山
const byteArray = new Uint8Array(base64Data.length)
for (let i = 0; i < base64Data.length; i++) {
    byteArray[i] = base64Data.charCodeAt(i) // 🎯 每块积木都有编号
}

💡 技术直男说：
charCodeAt()是数字积木的编号机，把字符转成ASCII码值。
🧱 白话版：就像给每个乐高积木贴上编号，方便后面拼图！

第三步：创建Blob对象（魔法沙漏）

image.png

// 🌈 用魔法沙漏装数字积木
const blob = new Blob([byteArray], { type: 'image/png' })

❗️ 关键警告：

  • 必须指定MIME类型（image/png）
  • Blob是只读容器，不能直接修改内容
  • 类比快递站：不带标签的匿名快递箱

第四步：生成临时URL（停车场车位）

image.png

// 🚗 在浏览器停车场生成临时车位
const imageUrl = URL.createObjectURL(blob)
document.getElementById('blobImage').src = imageUrl

🔥 程序员段子：
这个方法比Ctrl+C/V还可靠！但小心车位到期，记得用revokeObjectURL清场！

🎬 效果演示（程序员小剧场）

  1. 代码运行前：空白的<img>标签

  2. 代码运行后：图片成功显示！

  3. 老板表情包：老板开心.jpg → "这个程序员有前途！"

image.png

image.png

❓ 常见问题解答（FAQ）

image.png

Q1：Blob和File有什么区别？

❗️ 技术直男版：
File继承自Blob，自带name和size属性
💡 白话版：
Blob是匿名快递箱（📦），File是贴好标签的快递箱（📦+标签）

Q2：为什么用Blob而不是base64？

🔥 程序员梗：
Base64是万能翻译器，Blob是原装硬盘！
📝 技术解释：
Blob支持二进制操作（切割/修改），而base64只能看不能动

Q3：大文件处理会卡顿吗？

⚠️ 致命警告：
超大Blob会导致OOM（内存爆炸）！
🔧 解决方案：
用FileReader分片处理 → 吃火锅分锅煮！

Q4：如何释放ObjectURL？

🧨 错误示范：

// ❌ 会内存泄漏！
const url = URL.createObjectURL(blob)

🛠️ 正确姿势：

// ✅ 关掉停车场闸机
URL.revokeObjectURL(imageUrl)

🛠️ 小白自查清单

✅ 是否理解Base64是加密的"糖果包装纸"？
✅ 能否区分Blob和File的快递箱差异？
✅ 能否说出ObjectURL的"临时车位"特性？
✅ 是否掌握"解码→数组→Blob→URL"的四步流程？

🎁 Blob进阶彩蛋

image.png

  1. Blob文件下载：
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'image.png'
a.click()
  1. 文件切片上传：
const chunk = blob.slice(0, 1024*1024) // 取前1MB
  1. 视频流处理：
const videoUrl = URL.createObjectURL(new Blob([videoChunks]))

🔄 Blob使用三步曲（流程图）

image.png

[Base64字符串] 
   ↓ atob()解码 
[Uint8Array字节数组] 
   ↓ new Blob() 
[Blob对象] 
   ↓ createObjectURL() 
[临时URL] 
   ↓ img.src赋值 
[页面显示]

✨ 记住：Blob不是魔法，而是浏览器给你的"数字积木工坊"！
🔥 行动：现在就打开控制台，用Blob打造属于你的二进制世界吧！

avatar
文章
阅读
粉丝