Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

使用 blob

要从其它非 blob 对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 File 文档。

接受 Blob 对象的 API 也被列在 File 文档中。

构造函数

• Blob()

  返回一个新创建的 Blob 对象，其内容由参数中给定的数组拼接组成。

实例属性

• Blob.prototype.size 只读

  Blob 对象中所包含数据的大小（字节）。

• Blob.prototype.type 只读

  一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

实例方法

• Blob.prototype.arrayBuffer()

  返回一个 promise，其会兑现一个包含 Blob 所有内容的二进制格式的 ArrayBuffer。

• Blob.prototype.slice()

  返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

• Blob.prototype.stream()

  返回一个能读取 Blob 内容的 ReadableStream。

• Blob.prototype.text()

  返回一个 promise，其会兑现一个包含 Blob 所有内容的 UTF-8 格式的字符串。

示例

创建一个 blob

Blob() 构造函数可以通过其它对象创建 blob。例如，用一个 JSON 字符串构造一个 blob：

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

创建一个指向类型化数组的 URL

以下代码创建了一个 JavaScript 类型化数组，并创建一个新的，包含类型化数组中的数据的 Blob。然后调用 URL.createObjectURL() 方法，将 blob 转换为一个 URL。

HTML

<p>此示例创建一个类型化数组，其中包含空格以及 A 到
  Z 的 ASCII 字符。然后将其转换为一个对象
  URL。并创建一个打开该对象 URL 的链接。点击这个链接以查看对象
  URL 解码后的内容。</p>

JavaScript

该示例代码片段的主要片段是 typedArrayToURL() 函数，其用于从给定的类型化数组创建一个 Blob，并返回该 Blob 的对象 URL。将数据转换为对象 URL 后，可通过多种方式使用，包括：作为 <img> 元素 src 属性的值（当然，假设给定的数据包含了一张图片）。

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // 如果当前文档是否在一个 frame 中，则
    // 确保让用户在新的标签页或窗口中打开它。
    // 否则，此示例将无法正常演示。
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "查看上面示例代码的渲染结果";
    p.append(button);
    button.addEventListener('click', () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(new Blob([typedArray.buffer],
        {type: mimeType}))
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, 'text/plain');

  const link = document.createElement('a');
  link.href = url;
  link.innerText = '打开这个数组的 URL';

  document.body.appendChild(link);
}

从 blob 中提取数据

一种从 Blob 中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型化数组读取：

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // reader.result 包含被转化为类型化数组的 blob 中的内容
});
reader.readAsArrayBuffer(blob);

另一种读取 Blob 中内容的方式是使用 Response 对象。下述代码将 Blob 中的内容读取为文本：

const text = await (new Response(blob)).text();

或者，也可以使用 Blob.prototype.text()：

const text = await blob.text();

通过使用 FileReader 的其它方法可以把 Blob 读取为字符串或者数据 URL。

文章来源：developer.mozilla.org/zh-CN/docs/…

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

它是一个字节数组，通常在其他语言中称为“byte array”。

你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

尝试一下

语法

new ArrayBuffer(length)

参数

• length

  要创建的 ArrayBuffer 的大小，单位为字节。

返回值

一个指定大小的 ArrayBuffer 对象，其内容被初始化为 0。

异常

如果 length 大于 Number.MAX_SAFE_INTEGER（>= 2 ** 53）或为负数，则抛出一个 RangeError 异常。

描述

ArrayBuffer 构造函数用来创建一个指定字节长度的 ArrayBuffer 对象。

以现有数据获取 ArrayBuffer

• 从 Base64 字符串
• 从本地文件

属性

• ArrayBuffer.length

  ArrayBuffer 构造函数的 length 属性，其值为 1。

• ArrayBuffer.prototype.byteLength

  只读属性，表示 ArrayBuffer 的 byte 的大小，在 ArrayBuffer 构造完成时生成，不可改变。

• get ArrayBuffer[@@species]

  返回 ArrayBuffer 的构造函数。

• ArrayBuffer.prototype (en-US)

  通过 ArrayBuffer 的原型对象可以为所有 ArrayBuffer 对象添加属性。

方法

• ArrayBuffer.isView(arg)

  如果参数是 ArrayBuffer 的视图实例则返回 true，例如 类型数组对象 或 DataView 对象；否则返回 false。

• ArrayBuffer.transfer(oldBuffer [, newByteLength]) 实验性

  返回一个新的 ArrayBuffer 对象，其内容取自 oldBuffer 中的数据，并且根据 newByteLength 的大小对数据进行截取或补 0。

ArrayBuffer 实例

所有 ArrayBuffer 实例都会从 ArrayBuffer.prototype (en-US) 继承属性和方法。

属性

{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','属性')}}

方法

{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','方法')}}

• ArrayBuffer.slice() 非标准

  和 ArrayBuffer.prototype.slice() 功能相同。

示例

下面的例子创建了一个 8 字节的缓冲区，并使用一个 Int32Array 来引用它：

var buffer = new ArrayBuffer(8);
var view   = new Int32Array(buffer);