【JS Web API】从零理解 Web 开发中的 Blob API

2026-06-04 10:51:14

什么是 Blob?

String 可以存储字符串，Number 可以存储数字，而 Blob（Binary Large Object）则专门用于存储二进制数据，例如文本、图片、音频、视频等任何原始数据格式。

Blob 对象将二进制数据存储在内存中。

要获取其数据大小，可访问 blob.size 属性，其单位为字节（Byte）。
若要了解数据的具体类型（如图像、视频、HTML），则需查看 blob.type 属性，它返回数据的 MIME 类型（如 image/png），若类型未知则返回空字符串。

如何创建 Blob?

语法如下:

const blob = new Blob(array, options);

• array：必选参数，必须是一个数组。数组元素可以是字符串、ArrayBuffer、TypedArray 或 DataView。常见情况下多为字符串数组。例如，new Blob(“abc”) 会报错，而 new Blob([“abc”]) 则是正确的。
• options：可选参数，用于设置 Blob 的属性。最常用的是 type 字段，用于指定数据的 MIME 类型，例如 { type: ‘image/png’ }。

下面会给几个实际示例加深对 Blob 的理解。

示例一: 导出 SVG 文件

const code = "<rect x=\"20\" y=\"30\" width=\"60\" height=\"60\" rx=\"8\" fill=\"#3b82f6\"/><circle cx=\"130\" cy=\"60\" r=\"32\" fill=\"#22c55e\"/><polygon points=\"100,15 115,45 85,45\" fill=\"#ef4444\"/>Hello SVG! "
const blob = new Blob([code], { type: 'image/svg+xml;charset=utf-8' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `svg-${Date.now()}.svg`
a.click()
URL.revokeObjectURL(url)

code 变量存储着 SVG 的 XML 字符串。
new Blob([code], { type: 'image/svg+xml;charset=utf-8' }) 在内存中创建一个包含该 SVG 数据的 Blob 对象。
URL.createObjectURL(blob) 为该 Blob 生成一个临时、可用于浏览器访问的 URL。
创建一个 <a> 标签，将其 href 指向该临时 URL，并设置 download 属性（html5新增属性）以触发文件下载而非页面跳转。
最后，务必调用 URL.revokeObjectURL(url) 释放临时 URL 及其关联的 Blob 内存，避免内存泄漏。

此模式是 Blob 最常见的应用场景之一，同样适用于导出 HTML、JavaScript、JSON 等各类文件，只需修改 type 参数即可。

示例二: 图片本地预览

// input type=file 上传文件时触发
input.onchange = function(event) {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  const img = document.createElement("img");
  img.src = url;
  document.body.appendChild(img);
  // 使用完毕后记得释放
  URL.revokeObjectURL(url);
}

文件对象 File 是基于 Blob 扩展的，简单点可以认为 File 也是 Blob 对象，因此可以直接被处理。

用户选择图片后，无需上传至服务器，通过 URL.createObjectURL(file) 创建临时 URL 并赋值给 <img /> 元素的 src，即可实现本地预览。预览完成后应及时释放 URL。

示例三: Canvas 画布导出图片

function downloadCanvasAsPng(canvas, filename = 'image.png') {
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  }, 'image/png');
}

此示例利用 Canvas 元素的 toBlob() 方法，将画布内容直接转换为 PNG 格式的 Blob 数据，随后沿用“创建临时 URL → 触发下载 → 释放资源”的标准流程，将画布内容保存为图片文件。

这里只是为了演示，实际操作有更简单的方法:

// 方式一：使用 toDataURL() 同步操作，直接返回 Base64 编码的 data URL 字符串
const dataUrl = canvas.toDataURL('image/png');
// 说明：此方式等同于 toBlob() + URL.createObjectURL(blob) 的组合

// 方式二：使用 toBlob() 获取 Blob 再创建 URL
canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    // 使用 url 进行后续操作...
});

↶ 返回首页 ↶

本文总阅读量次