javascript - Blob 会持续多久？

Question

我正在尝试编写一个故障安全程序，使用 Canvas 绘制非常大的图像(60 MB 可能是上限，而 10 MB 是下限)。很久以前就发现调用canvas的同步函数toDataURL通常会导致页面在浏览器中崩溃，所以我将程序适配为使用toBlob方法使用filler为了跨浏览器的兼容性。我的问题是:使用 URL.createObjectURL(blob) 方法的 Blob URL 能持续多久？

我想知道是否有一种缓存 Blob URL 的方法，允许它在浏览器 session 之后持续存在，以防有人想在某一时刻渲染部分图像，关闭浏览器，然后返回并完成稍后通过再次将 Blob URL 读入 Canvas 并从它停止的点继续。我注意到 this optional autoRevoke argument可能是我正在寻找的东西，但我想确认我正在尝试做的事情实际上是可能的。除非涉及不同的解决方案，否则您的答案中不需要代码示例，如果可以使用此方法或其他方式使 Blob URL 在 session 之外持续存在，我只需要是或否。 (如果由于某种原因页面崩溃并且它也像“恢复 session ”选项一样工作，这也会很方便。)

我在想这样的事情:

function saveCache() {
  var canvas = $("#canvas")[0];
  canvas.toBlob(function (blob) {
    /*if I understand correctly, this prevents it from unloading
      automatically after one asynchronous callback*/
    var blobURL = URL.createObjectURL(blob, {autoRevoke: false});
    localStorage.setItem("cache", blobURL);
  });
}

//assume that this might be a new browser session

function loadCache() {
  var url = localStorage.getItem("cache");
  if(typeof url=="string") {
    var img = new Image();
    img.onload = function () {
      $("#canvas")[0].getContext("2d").drawImage(img, 0, 0);
      //clear cache since it takes up a LOT unused of memory
      URL.revokeObjectURL(url);
      //remove reference to deleted cache
      localStorage.removeItem("cache");
      init(true); //cache successfully loaded, resume where it left off
    };
    img.onprogress = function (e) {
      //update progress bar
    };
    img.onerror = loadFailed; //notify user of failure
    img.src = url;
  } else {
    init(false); //nothing was cached, so start normally
  }
}

请注意，我不确定这是否会按我预期的方式工作，所以任何确认都很棒。

编辑 刚刚意识到 sessionStorage 与 localStorage 不同:P

Answer 1

Blob URL 可以跨 session 吗？不是你想要的方式。

URL 是一个以字符串表示的引用，您可以像保存任何字符串一样将其保存在 localStorage 中。 URL 指向的位置是您真正想要的，并且不会在 session 中持续存在。

将 URL.toObjectUrl() 与 autoRevoke 参数结合使用时，URL 将一直存在，直到您调用 revokeObjectUrl 或“直到执行卸载文档清理步骤。 “(此处概述的步骤:http://www.w3.org/TR/html51/browsers.html#unloading-document-cleanup-steps)

我的猜测是这些步骤在浏览器 session 过期时执行，这就是为什么您的 blobURL 的目标无法在后续 session 中访问的原因。

关于此的一些其他讨论:How to save the window.URL.createObjectURL() result for future use?

以上内容导致了使用 FileSystem API 来保存 Canvas 元素的 blob 表示的建议。第一次请求文件系统时，您需要请求 PERSISTENT 存储，并且用户必须同意让您将数据永久存储在他们的机器上。

http://www.html5rocks.com/en/tutorials/file/filesystem/有一本很好的入门书，可以满足您的一切需求。