有没有办法将数据流式传输到 blob（或生成一个巨大的 blob）

Question

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

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

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

我唯一能想到的显然是我可以Blob从Blobs制作一个，所以我想我可以将图像的每个部分写入一个单独的 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(...);

那不会耗尽内存，因为周围的数据永远不会超过 1meg。浏览器可以将附加到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、英特尔酷睿 I3 - 64 位。