js Blob 数据类型详解|极客笔记

js Blob 数据类型详解

1. 概述

Blob 是一种不可变的二进制数据类型，用于存储大型数据，例如图像、音频和视频等文件。Blob 类型可以将数据封装成一个对象，并提供了一系列方法来操作这些数据。

在 JavaScript 中，Blob 对象主要用于处理从服务器获取的响应数据，或者在客户端生成、处理和上传文件。本文将详细介绍 Blob 对象的特性、创建方法、读取操作以及常见应用场景。

2. Blob 对象的创建

2.1 构造函数创建

Blob 对象可以通过其构造函数进行创建。构造函数的形式如下：

new Blob(array, options)

array：由数组组成的序列，每个数组元素代表一个 8 位无符号整数值数据组成的数组。也可以是一个嵌套的数组，每个子数组代表一片片数据。
options：可选参数，一个字典对象，可以设置 type 属性，指定 Blob 对象的 MIME 类型。

示例代码如下：

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

结果：

Blob {size: 12, type: "text/plain"}

2.2 使用 BlobBuilder 创建

BlobBuilder 是一个已废弃的接口，不再建议使用。在旧版浏览器中，可以使用 BlobBuilder 进行 Blob 对象的创建。

示例代码如下：

const builder = new BlobBuilder();
builder.append('Hello, World!');
const blob = builder.getBlob('text/plain');

结果：

Blob {size: 13, type: "text/plain"}

2.3 使用 from/to 创建

在一些现代浏览器中，可以使用 Blob.from 和 Blob.to 方法进行 Blob 对象的创建。

示例代码如下：

const data = 'Hello, World!';
const blob = Blob.from(data);

结果：

Blob {size: 13, type: ""}

3. Blob 对象的读取

Blob 对象提供了多种方法来读取数据。下面介绍两种常用的读取方法：

3.1 使用 FileReader 读取

FileReader 是一个异步读取文件数据的接口，在 Blob 对象中同样可以使用 FileReader 来读取数据。

示例代码如下：

const fileReader = new FileReader();
fileReader.onload = function(event) {
  console.log(event.target.result);
}
fileReader.readAsText(blob);

结果：

Hello, World!

3.2 使用 URL.createObjectURL 读取

URL.createObjectURL 方法用于创建一个 DOMString，该 DOMString 表示传入的 Blob 对象的 URL。这个 URL 可以用于显示 Blob 对象的内容。

示例代码如下：

const url = URL.createObjectURL(blob);
console.log(url);

结果：

blob:f02d226f-370b-4e2e-906a-f8f94700ed3d

4. Blob 对象的应用场景

Blob 对象在前端开发中有许多应用场景，下面列举几个常见的应用实例：

4.1 文件上传

通过使用 Blob 对象，我们可以将客户端选择的文件进行处理，并上传到服务器。

示例代码如下：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = e.target.result;
    // 将 data 上传到服务器
  }
  reader.readAsArrayBuffer(file);
});

4.2 图片操作

Blob 对象可以用于在前端进行图片的裁剪、缩放、转换格式等操作，再将处理后的图片显示在页面上或下载保存。

示例代码如下：

const image = document.querySelector('img');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
  // 处理后的图片保存或显示
}, 'image/jpeg', 0.8);

4.3 音频处理

使用 Blob 对象，我们可以对音频进行剪辑、混音、压缩等处理，然后将处理后的音频保存或播放。

示例代码如下：

const audio = document.querySelector('audio');
const chunks = [];
const mediaRecorder = new MediaRecorder(audio);
mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
};
mediaRecorder.onstop = function() {
  const blob = new Blob(chunks);
  // 处理后的音频保存或播放
};
mediaRecorder.start();
setTimeout(function() {
  mediaRecorder.stop();
}, 5000);