JavaScript处理原始二进制数据-Blob对象

Blob 是 JavaScript 中的一个核心对象，用于处理原始二进制数据。它常用于在浏览器中生成文件，处理下载或上传文件的场景。

---

什么是 Blob？

• 定义: Blob 是一个不可变的、原始数据的类文件对象，可以用来存储任意格式的数据，比如文本、二进制数据等。
• 用法: 你可以通过 Blob 创建文件对象并操作这些文件（如下载、预览等）。

---

创建 Blob

你可以使用 Blob 构造函数来创建一个 Blob 对象。

语法

const blob = new Blob(array, options);

• array: 一个由字符串、ArrayBuffer、TypedArray 或其他 Blob 组成的数组。
• options: 可选的对象，定义文件的 MIME 类型和编码。
  • type: 表示文件的 MIME 类型，例如 text/plain 或 image/png。
  • endings: 可选，默认为 transparent。可以是：
    • transparent（默认）: 保留字符串中的换行符 \n。
    • native: 将换行符标准化为 \r\n。

---

创建文本 Blob

const textBlob = new Blob(['Hello, world!'], { type: 'text/plain' });
console.log(textBlob); // Blob { size: 13, type: "text/plain" }

---

创建二进制 Blob

const binaryBlob = new Blob([new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f])], { type: 'application/octet-stream' });
console.log(binaryBlob); // Blob { size: 5, type: "application/octet-stream" }

---

常见场景

1. 下载文件

使用 Blob 创建一个文件并下载：

function downloadBlobFile(content, filename, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);  // 创建临时 URL

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

  URL.revokeObjectURL(url); // 释放 URL
}

// 示例：下载文本文件
downloadBlobFile('Hello, Blob!', 'example.txt', 'text/plain');

---

2. 处理文件上传（预览或保存）

通过 Blob 对象，可以实现文件上传前的预览功能。

function previewImage(file) {
  const reader = new FileReader();
  reader.onload = function (e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file); // 将文件读取为 Base64 编码
}

// 示例：通过 <input> 选择文件后预览
document.querySelector('#fileInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  previewImage(file);
});

---

3. 合并多个 Blob 对象

多个 Blob 对象可以合并为一个新的 Blob。

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

const combinedBlob = new Blob([blob1, blob2], { type: 'text/plain' });

// 下载合并后的 Blob
downloadBlobFile(combinedBlob, 'combined.txt', 'text/plain');

---

4. 将图片或文件转换为 Blob

如果你有一个文件或图片 URL，可以通过 fetch 获取其内容并转换为 Blob：

async function fetchImageAsBlob(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Network response was not ok');
  const blob = await response.blob();

  // 例如，将其下载
  downloadBlobFile(blob, 'image.jpg', 'image/jpeg');
}

// 示例：从远程 URL 获取图片并下载
fetchImageAsBlob('https://example.com/image.jpg');

---

Blob 常见方法

1. slice

   • 截取 Blob 的一部分，返回一个新的 Blob。

   const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
   const slicedBlob = blob.slice(0, 5); // 截取前 5 个字节
   console.log(slicedBlob); // Blob { size: 5, type: "text/plain" }
   

2. stream

   • 返回一个可读流，用于逐步读取 Blob 数据。

3. text

   • 将 Blob 转换为字符串，返回一个 Promise。

   const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
   blob.text().then(console.log); // 输出: "Hello, world!"
   

4. arrayBuffer

   • 将 Blob 转换为 ArrayBuffer，返回一个 Promise。

   const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
   blob.arrayBuffer().then((buffer) => {
     console.log(new Uint8Array(buffer)); // 输出二进制数组
   });
   

---

Blob 使用注意事项

1. 内存管理：

   • 创建 Blob 对象后生成的 URL（URL.createObjectURL）需要及时释放，否则可能导致内存泄漏。调用 URL.revokeObjectURL(url) 释放资源。

2. 跨域问题：

   • 如果通过 fetch 或其他方式获取跨域资源，服务器需要配置正确的 CORS 头部。

---

总结

Blob 是一个非常强大的工具，适用于：

• 下载生成文件。
• 文件操作（合并、裁剪等）。
• 上传前文件预览。
  通过配合 fetch 和 FileReader，可以实现非常丰富的文件处理功能。