Javascript FileSaver 在写入大量文件后保存空文件

Question

背景

我正在从事一个基本上可以在客户端生成视频的内部项目，但由于我不知道有任何 JavaScript 视频编码器，所以我只是单独导出每个帧。我需要避免上传到服务器；这一切都发生在客户端。

实现

我正在使用这个 FileSaver.js (更具体地说，Chrome 的 webkit FileSystem API)保存大量由 HTML5 Canvas 生成的 PNG。我将 Chrome 设置为自动下载到特定文件夹，所以当我点击“保存”时，它会立即启动并每秒保存大约 20 张图像。这非常适合我的目的。

如果我可以使用 JSZip在将所有这些帧压缩到一个文件中，然后将其提供给客户端保存，我愿意，但我什至没有尝试过，因为浏览器没有足够的内存来生成〜8000 640x480 PNG然后压缩它们。

问题

问题是在一定数量的图像之后，每个下载的文件都是空的。 Chrome 甚至开始在下载栏中告诉我该文件为 0 字节。在具有相同导出设置的同一项目上重复，空保存在完全相同的时间开始。例如，对于一个项目，我可以在它卡住之前保存前 5494 帧。 (我知道这是一个非常大的数字，但我无能为力。)我尝试在保存之间设置 10 毫秒的延迟，但这没有任何效果。我没有尝试过更大的延迟，因为导出需要很长时间。

我检查了 blob.size，它永远不会为零。我怀疑它超出了一些配额，但没有抛出任何错误；它只是默默地无法写入沙箱或将文件复制到用户指定的位置。

问题

我如何检测这些空存档？阻止他们？有一个更好的方法吗？我只是搞砸了吗？

---

编辑:实际上，在调试 FileSaver.js 之后，我意识到它甚至没有使用 webkitRequestFileSystem；它到达这里时返回:

if (can_use_save_link) {
    object_url = get_object_url(blob);
    save_link.href = object_url;
    save_link.download = name;
    if (click(save_link)) {
        filesaver.readyState = filesaver.DONE;
        dispatch_all();
        return;
    }
}

所以，看起来它甚至没有使用 FileSystem API，因此我不知道如何在存储空间满之前清空它。

---

编辑 2:我尝试将“if (can_use_save_link)” block 移动到“writer.onwriteend”函数内部，并将其更改为:

if (can_use_save_link) {
    save_link.href = file.toURL();
    save_link.download = name;
    click(save_link);
}else{
    target_view.location.href = file.toURL();
}

结果是我能够保存所有 8260 个文件(总共约 1.5GB)，因为它现在使用的存储空间有配额。以前，这些文件没有出现在 HTML5 文件系统中，因为我假设如果 anchor 元素支持“下载”属性，则不需要将它们放在那里。

我还能够注释掉将“.download”附加到文件名的代码，并且我必须提供一个空的匿名函数作为“file.remove()”的两个实例的参数。

Answer 1

使用 JSZip，如果禁用压缩(默认)，它不会占用太多内存。无论如何要手动禁用压缩，请确保在调用 zip.generate() 时传递 compression: "STORE"。