JavaScript教程：深入理解Blob对象-优快云博客

JavaScript教程：深入理解Blob对象

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是Blob对象

Blob（Binary Large Object）是JavaScript中用于处理二进制数据的高阶对象。它扩展了ECMA标准中的ArrayBuffer和类型化数组功能，为浏览器环境提供了更便捷的二进制数据处理方式。

Blob对象由两部分组成：

可选的type属性（通常是MIME类型）
blobParts - 包含其他Blob对象、字符串或BufferSource的序列

Blob的创建与操作

构造函数语法

new Blob(blobParts, options);

参数说明：

blobParts：数组，包含Blob/BufferSource/String类型的值
options：可选配置对象
- type：Blob的MIME类型，如image/png
- endings：指定是否转换行结束符为当前操作系统格式

创建示例

// 从字符串创建HTML类型的Blob
let htmlBlob = new Blob(["<html>...</html>"], {type: 'text/html'});

// 从类型化数组和字符串组合创建
let helloBytes = new Uint8Array([72, 101, 108, 108, 111]); // "Hello"的二进制形式
let textBlob = new Blob([helloBytes, ' world'], {type: 'text/plain'});

Blob切片

Blob是不可变对象，但可以通过切片创建新的Blob：

blob.slice([byteStart], [byteEnd], [contentType]);

参数与数组的slice方法类似，支持负数索引。

Blob的常见应用场景

1. 作为URL使用

Blob可以转换为URL，用于<a>、<img>等标签：

// 创建下载链接示例
let blob = new Blob(["Hello, world!"], {type: 'text/plain'});
let link = document.createElement('a');
link.download = 'hello.txt';
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href); // 释放内存

重要注意事项：

URL.createObjectURL()会创建内部映射，保持Blob在内存中
必须调用URL.revokeObjectURL()手动释放内存
生成的URL仅在文档打开期间有效

2. Base64编码转换

Blob可以转换为Base64编码的Data URL：

let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
  let dataUrl = reader.result;
  // 使用dataUrl...
};

两种URL创建方式比较：

| 特性 | URL.createObjectURL() | Base64 Data URL | |------|-------------------------|-----------------| | 内存管理 | 需要手动释放 | 自动管理 | | 性能 | 更高，直接访问Blob | 较低，需要编解码 | | 适用场景 | 大文件临时访问 | 小文件内联使用 |

3. 图像处理

Canvas可以生成图像Blob，用于下载或上传：

let canvas = document.createElement('canvas');
// 绘制图像到canvas...
canvas.toBlob(function(blob) {
  let imgUrl = URL.createObjectURL(blob);
  // 使用图像URL...
}, 'image/png');

4. 与ArrayBuffer互转

// Blob转ArrayBuffer
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(blob);
fileReader.onload = function() {
  let arrayBuffer = fileReader.result;
  // 处理二进制数据...
};