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

Question

背景

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

实作

我正在使用此FileSaver.js（更具体地说是Chrome的webkit FileSystem API）保存由HTML5画布生成的大量PNG。我将Chrome设置为自动下载到特定文件夹，因此当我点击“保存”时，它会起飞并每秒保存20张图片。这完全适合我的目的。

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

问题

问题在于，经过一定数量的图像后，下载的每个文件都是空的。Chrome浏览器甚至开始在下载栏中告诉我文件为0字节。在具有相同导出设置的同一项目上重复此操作，则完全在同一时间开始空保存。例如，对于一个项目，我可以在窒息之前保存前5494帧。（我知道这是一个很大的数字，但我对此无能为力。）我尝试将两次保存之间的延迟设置为10ms，但这没有任何效果。我没有尝试更大的延迟，因为导出实际上需要很长时间。

我检查了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）”块移到“ 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 FileSystem中，因为我假设如果锚元素支持'download'属性，则无需将它们放置在此处。

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

Answer 1

我最终修改了 FileSaver.js （请参阅原始帖子中的“编辑 2”）。