剖析二进制对象及其转换处理：掌控Blob、File、ArrayBuffer等操作

2022-12-15 11:47:16

二进制对象：Blob、File 和 ArrayBuffer

简介

在 JavaScript 中，二进制对象 用于存储二进制数据，如图像、音频和视频。这三种最常见的二进制对象是 Blob 、File 和 ArrayBuffer 。了解这些对象的特性对于有效管理二进制数据至关重要。

Blob：二进制数据的通用容器

Blob 对象表示一个二进制数据的块。它可以包含任何类型的数据，包括文本、图像、音频和视频。Blob 对象提供了对数据的基本操作，例如分块和追加。它在处理一般二进制数据时非常有用。

File：面向文件的 Blob

File 对象是 Blob 的子类，专门用于表示文件。除了 Blob 对象的功能外，File 对象还具有其他信息，例如文件名、大小和类型。这使得 File 对象非常适合处理文件上传和下载。

ArrayBuffer：固定大小的二进制数据块

ArrayBuffer 对象表示一个固定大小的二进制数据块。它可以存储任何类型的数据，就像 Blob 对象一样。然而，与 Blob 对象不同，ArrayBuffer 只能在创建后才能修改其大小。这使得 ArrayBuffer 非常适合需要固定大小二进制数据的应用程序，例如图像处理和音频编码。

二进制对象转换和处理

FileReader：将二进制数据转换为文本和 ArrayBuffer

FileReader 对象用于将 Blob 或 File 对象转换为字符串、ArrayBuffer 对象或 Data URL。这对于在网页中使用二进制数据非常有用，例如在标签中显示图像。

URL.createObjectURL：创建指向 Blob 或 File 对象的 URL

URL.createObjectURL 方法创建指向 Blob 或 File 对象的 URL。此 URL 可用于在网页中使用二进制对象，例如在

操作二进制对象：一个示例

以下代码示例演示如何使用 FileReader 将图像文件转换为 Data URL 并将其显示在网页中：

// 创建 FileReader 对象
const reader = new FileReader();

// 读取图片文件
reader.readAsDataURL(file);

// 监听 FileReader 对象的 load 事件
reader.addEventListener("load", function() {
  // 获取图片的 Data URL
  const dataURL = reader.result;

  // 在网页中显示图片
  const img = document.createElement("img");
  img.src = dataURL;
  document.body.appendChild(img);
});