javascript - 有没有办法将数据流式传输到一个 blob(或生成一个巨大的 blob)

Question

检查 MDN 我看到曾经有 BlobBuilder我可以调用blobBuilder.append继续向 blob 添加数据，但根据 MDN BlobBuilder 已弃用，取而代之的是 Blob constructor .不幸的是，Blob 构造函数在构造时需要内存中的所有数据。我的数据太大，无法在构建时存储在内存中。看着 File API也看不到任何东西。

有没有办法生成大数据客户端并将其放入 blob 中？例如说我想渲染一个 16k x 16k 的图像。未压缩，这是一个 1gig 图像。

我有一个算法可以一次生成 1 条或几条扫描线，但我需要将这些扫描线写入文件/blob，然后在完成后我可以使用标准方式让用户下载blob 但是，我似乎找不到可以让我将数据流式传输到 blob 中的 API。

我唯一能想到的显然是我可以从 Blob 中创建一个 Blob 所以我想我可以将图像的每个部分写入一个单独的 blob 并且然后将所有 blob 发送到另一个 blob 以获得一个大 blob。

这是唯一的解决方案吗？似乎有点……奇怪。虽然如果它有效那么¯\_(ツ)_/¯

---

有人投票关闭，因为他们不理解这个问题。这是另一种解释。

将 4 gig 写入 blob

 const arrays = [];
 for (let i = 0; i < 4096; ++i) {
   arrays.push(new Uint8Array(1024 * 1024)); // 1 meg
 }
 // arrays now holds 4 gig of data
 const blob = new Blob(arrays);

上面的代码会崩溃，因为浏览器会因使用过多内存而终止页面。使用 BlobBuilder 我可以做类似的事情

 const builder = new BlobBuilder();
 for (let i = 0; i < 4096; ++i) {
   const data = new Uint8Array(1024 * 1024); // 1 meg
   builder.append(data);
 }
 const blob = builder.getBlob(...);

那不会耗尽内存，因为周围的数据永远不会超过 1 兆。浏览器可以将附加到 BlobBuilder 的数据刷新到磁盘。

将 4 gig 写入 blob 的新方法是什么？是只写很多小 blob，然后使用它们生成一个更大的 blob，还是有一些更传统的方式，传统的方法是将其传输到某个对象/文件/blob/存储中。

Answer 1

如您所知，blob 将包含的数据必须准备好传递给构造函数。让我们以 MDN 中的示例为例:

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'});

现在，我们有两个选择:

1. 我们可以将数据附加到数组，然后将其转换为 blob:

   var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
   aFileParts.push('<p>How are you?</p>');
   var oMyBlob = new Blob(aFileParts, {type : 'text/html'});
   

2. 或者，我们可以使用 blob 来创建 blob:

   var oMyOtherBlob = new Blob([], {type: 'text/html'});
   oMyOtherBlob = new Blob([oMyOtherBlob, '<a id="a"><b id="b">hey!</b></a>'], {type : 'text/html'});
   oMyOtherBlob= new Blob([oMyOtherBlob, '<p>How are you?</p>'], {type : 'text/html'});
   

您可以构建自己的 BlobBuilder 封装...鉴于附加到数组似乎会导致内存不足，让我们封装第二个选项:

var MyBlobBuilder = function() {
     var blob = new Blob([], {type: 'text/html'});
     this.append = function(src)
     {
         blob = new Blob([blob, src], {type: 'text/html'});
     };
     this.getBlob = function()
     {
         return blob;
     }
};

注意:使用您的代码进行测试(将 BlobBuilder 替换为 MyBlobBuilder)，我的机器上没有耗尽内存。 Windows 10、Chrome 67、8 GB Ram、Intel Core I3 - 64 位。