From 350822eae514a9216742c9f36089346f2764eb80 Mon Sep 17 00:00:00 2001 From: law <307990588@qq.com> Date: Tue, 8 Feb 2022 16:05:03 +0800 Subject: [PATCH 1/4] =?UTF-8?q?Update:=20=E6=9B=B4=E6=96=B0blob=E7=9A=84?= =?UTF-8?q?=E6=9C=80=E6=96=B0=E4=BD=BF=E7=94=A8=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新了 blob 到 arrayBuffer、blob 到流的最新方法，以及一些使用它们的技巧。 https://developer.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer https://developer.mozilla.org/en-US/docs/Web/API/Blob/stream --- 4-binary/03-blob/article.md | 46 +++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index 193ba69f41..b7f6fa1405 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -211,21 +211,47 @@ let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')) `Blob` 构造器允许从几乎所有东西创建 blob，包括任何 `BufferSource`。 -但是，如果我们需要执行低级别的操作的话，则可以使用 `FileReader` 从 blob 中获取最低级别的 `ArrayBuffer`： +但是，如果我们需要执行低级别的操作的话，则可以使用 `blob.arrayBuffer()` 从 blob 中获取最低级别的 `ArrayBuffer`： ```js -// 从 blob 获取 arrayBuffer -let fileReader = new FileReader(); -*!* -fileReader.readAsArrayBuffer(blob); -*/!* +// 从 blob 获取 ArrayBuffer +const bufferPromise = await blob.arrayBuffer(); -fileReader.onload = function(event) { - let arrayBuffer = fileReader.result; -}; +// 或者 +blob.arrayBuffer().then(buffer => /* 处理 ArrayBuffer */); ``` +## Blob 转换为 Stream + +当我们读取和写入超过 `2 GB` 的 blob 时，将其转换为 `AarrayBuffer` 的使用对我们来说会更加占用内存。这种情况下，我们可以直接将 `Blob` 转换为 `stream` 进行处理。 + +`stream`是一种特殊的对象，我们可以从它那里逐部分地读取（或写入）。它是一种数据的集合，对于适合逐个处理的数据，`stream` 可以很方便的进行处理。这块的知识点不在这篇文章的范围之内，但这里有一个例子，你可以在 了解更多。 + +`Blob` 接口里的 `stream()` 方法返回一个 `ReadableStream`，在读取时可以返回 `Blob` 中包含的数据。 + +如下所示： + +```js + +// 从 blob 获取可读流 +const readableStream = blob.stream(); +const stream = readableStream.getReader(); + +while (true) { + // 对于每次的迭代：data是下一个blob数据片段 + let { done, data } = await stream.read(); + if (done) { + // 读取完毕，stream里已经没有数据 + console.log('all blob processed.'); + break; + } + + // 对刚从blob中读取的数据部分, 做一些处理 + console.log(data); +} + +``` ## 总结 @@ -239,3 +265,5 @@ fileReader.onload = function(event) { - 我们可以使用 `new Blob(...)` 构造函数从一个类型化数组（typed array）创建 `Blob`。 - 我们可以使用 `FileReader` 从 `Blob` 中取回 `ArrayBuffer`，然后在其上创建一个视图（view），用于低级别的二进制处理。 + +当我们需要处理大型 `Blob` 时，将其转换 `stream` 非常有用。 你可以轻松地从 `Blob` 创建 `ReadableStream`。`Blob` 接口的 `stream()` 方法返回一个 `ReadableStream`，其在读取时返回 `Blob` 中包含的数据。 From 2262840fd86736351ba7f45102004238b181c7a8 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sat, 12 Feb 2022 18:32:26 +0800 Subject: [PATCH 2/4] Update article.md --- 4-binary/03-blob/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index b7f6fa1405..70aac8cc8d 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -214,7 +214,6 @@ let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')) 但是，如果我们需要执行低级别的操作的话，则可以使用 `blob.arrayBuffer()` 从 blob 中获取最低级别的 `ArrayBuffer`： ```js - // 从 blob 获取 ArrayBuffer const bufferPromise = await blob.arrayBuffer(); From 7dc4d127678196ce87d8fa167ec6718833d23f00 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sat, 12 Feb 2022 18:56:31 +0800 Subject: [PATCH 3/4] Update article.md --- 4-binary/03-blob/article.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index 70aac8cc8d..3f5c15907c 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -1,6 +1,6 @@ # Blob -`ArrayBuffer` 和视图（view）都是 ECMA 标准的一部分，是 JavaScript 的一部分。 +`arrayBuffer` 和视图（view）都是 ECMA 标准的一部分，是 JavaScript 的一部分。 在浏览器中，还有其他更高级的对象，特别是 `Blob`，在 [File API](https://www.w3.org/TR/FileAPI/) 中有相关描述。 @@ -207,25 +207,25 @@ let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')) 对于页面截屏，我们可以使用诸如 之类的库。它所做的只是扫一遍浏览器页面，并将其绘制在 `` 上。然后，我们就可以像上面一样获取一个它的 `Blob`。 -## Blob 转换为 ArrayBuffer +## Blob 转换为 arrayBuffer `Blob` 构造器允许从几乎所有东西创建 blob，包括任何 `BufferSource`。 -但是，如果我们需要执行低级别的操作的话，则可以使用 `blob.arrayBuffer()` 从 blob 中获取最低级别的 `ArrayBuffer`： +但是，如果我们需要执行低级别的操作的话，则可以使用 `blob.arrayBuffer()` 从 blob 中获取最低级别的 `arrayBuffer`： ```js -// 从 blob 获取 ArrayBuffer +// 从 blob 获取 arrayBuffer const bufferPromise = await blob.arrayBuffer(); // 或者 -blob.arrayBuffer().then(buffer => /* 处理 ArrayBuffer */); +blob.arrayBuffer().then(buffer => /* 处理 arrayBuffer */); ``` -## Blob 转换为 Stream +## blob 转换为 stream -当我们读取和写入超过 `2 GB` 的 blob 时，将其转换为 `AarrayBuffer` 的使用对我们来说会更加占用内存。这种情况下，我们可以直接将 `Blob` 转换为 `stream` 进行处理。 +当我们读取和写入超过 `2 GB` 的 blob 时，将其转换为 `arrayBuffer` 的使用对我们来说会更加占用内存。这种情况下，我们可以直接将 blob 转换为 stream 进行处理。 -`stream`是一种特殊的对象，我们可以从它那里逐部分地读取（或写入）。它是一种数据的集合，对于适合逐个处理的数据，`stream` 可以很方便的进行处理。这块的知识点不在这篇文章的范围之内，但这里有一个例子，你可以在 了解更多。 +stream 是一种特殊的对象，我们可以从它那里逐部分地读取（或写入）。这块的知识点不在本文的范围之内，但这里有一个例子，你可以在 了解更多相关内容。对于适合逐段处理的数据，使用 stream 是很方便的。 `Blob` 接口里的 `stream()` 方法返回一个 `ReadableStream`，在读取时可以返回 `Blob` 中包含的数据。 @@ -254,7 +254,7 @@ while (true) { ## 总结 -`ArrayBuffer`，`Uint8Array` 及其他 `BufferSource` 是“二进制数据”，而 [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob) 则表示“具有类型的二进制数据”。 +`arrayBuffer`，`Uint8Array` 及其他 `BufferSource` 是“二进制数据”，而 [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob) 则表示“具有类型的二进制数据”。 这样可以方便 `Blob` 用于在浏览器中非常常见的上传/下载操作。 @@ -263,6 +263,6 @@ while (true) { 我们可以轻松地在 `Blob` 和低级别的二进制数据类型之间进行转换： - 我们可以使用 `new Blob(...)` 构造函数从一个类型化数组（typed array）创建 `Blob`。 -- 我们可以使用 `FileReader` 从 `Blob` 中取回 `ArrayBuffer`，然后在其上创建一个视图（view），用于低级别的二进制处理。 +- 我们可以使用 `FileReader` 从 `Blob` 中取回 `arrayBuffer`，然后在其上创建一个视图（view），用于低级别的二进制处理。 当我们需要处理大型 `Blob` 时，将其转换 `stream` 非常有用。 你可以轻松地从 `Blob` 创建 `ReadableStream`。`Blob` 接口的 `stream()` 方法返回一个 `ReadableStream`，其在读取时返回 `Blob` 中包含的数据。 From 65b34a64fb089b27f8eedb95beebe11823a90650 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sat, 12 Feb 2022 20:45:09 +0800 Subject: [PATCH 4/4] Update article.md --- 4-binary/03-blob/article.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index 3f5c15907c..6c840ffd38 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -221,35 +221,33 @@ const bufferPromise = await blob.arrayBuffer(); blob.arrayBuffer().then(buffer => /* 处理 arrayBuffer */); ``` -## blob 转换为 stream +## Blob 转换为 stream 当我们读取和写入超过 `2 GB` 的 blob 时，将其转换为 `arrayBuffer` 的使用对我们来说会更加占用内存。这种情况下，我们可以直接将 blob 转换为 stream 进行处理。 stream 是一种特殊的对象，我们可以从它那里逐部分地读取（或写入）。这块的知识点不在本文的范围之内，但这里有一个例子，你可以在 了解更多相关内容。对于适合逐段处理的数据，使用 stream 是很方便的。 -`Blob` 接口里的 `stream()` 方法返回一个 `ReadableStream`，在读取时可以返回 `Blob` 中包含的数据。 +`Blob` 接口里的 `stream()` 方法返回一个 `ReadableStream`，在被读取时可以返回 `Blob` 中包含的数据。 如下所示： ```js - -// 从 blob 获取可读流 +// 从 blob 获取可读流（readableStream） const readableStream = blob.stream(); const stream = readableStream.getReader(); while (true) { - // 对于每次的迭代：data是下一个blob数据片段 + // 对于每次迭代：data 是下一个 blob 数据片段 let { done, data } = await stream.read(); if (done) { - // 读取完毕，stream里已经没有数据 + // 读取完毕，stream 里已经没有数据了 console.log('all blob processed.'); break; } - // 对刚从blob中读取的数据部分, 做一些处理 + // 对刚从 blob 中读取的数据片段做一些处理 console.log(data); } - ``` ## 总结 @@ -265,4 +263,4 @@ while (true) { - 我们可以使用 `new Blob(...)` 构造函数从一个类型化数组（typed array）创建 `Blob`。 - 我们可以使用 `FileReader` 从 `Blob` 中取回 `arrayBuffer`，然后在其上创建一个视图（view），用于低级别的二进制处理。 -当我们需要处理大型 `Blob` 时，将其转换 `stream` 非常有用。 你可以轻松地从 `Blob` 创建 `ReadableStream`。`Blob` 接口的 `stream()` 方法返回一个 `ReadableStream`，其在读取时返回 `Blob` 中包含的数据。 +当我们需要处理大型 blob 时，将其转换为 `stream` 非常有用。你可以轻松地从 blob 创建 `ReadableStream`。`Blob` 接口的 `stream()` 方法返回一个 `ReadableStream`，其在被读取时返回 blob 中包含的数据。