小编gru*_*ler的帖子

背景

我正在开发一个内部项目，该项目基本上可以在客户端上生成视频，但是由于我不知道没有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（）”的两个实例的参数。

通知显示正常，但是当我单击它或执行任何操作时，什么也没有发生。我没有看到任何日志记录，没有错误消息，但通知确实关闭了（尽管即使我注释掉它也会关闭event.notification.close()）。

我尝试使用 Chrome 调试器，并且可以在显示通知的代码中设置断点，但notificationclick处理程序中的所有断点都无法暂停执行。

我花了好几天的时间试图让它发挥作用，但我已经束手无策了。

const auth = firebase.auth();
const functions = firebase.functions();
const done = functions.httpsCallable("done");
const snooze = functions.httpsCallable("snooze");

self.addEventListener("notificationclick", event => {
  console.log("notificationclick", event);
  const uid = auth.currentUser.uid;
  const { id, url } = event.notification.data;

  event.notification.close();
  event.waitUntil(() => {
    switch (event.action) {
      case "done":
        console.log("Done");
        return done({ uid, id });
      case "snooze1":
        console.log("Snooze 1 Hour");
        return snooze({ uid, id, hours: 1 });
      case "snooze24":
        console.log("Snooze 1 Day");
        return snooze({ uid, id, hours: 24 …