20

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

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

我在想这样的事情：

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不同

4

1 回答 1

20

Blob URL 可以跨会话持续吗？不是你想要的方式。

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

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

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

关于此的其他一些论述：如何保存 window.URL.createObjectURL() 结果以供将来使用？

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

http://www.html5rocks.com/en/tutorials/file/filesystem/有一个很好的入门知识，你需要的一切。

于 2012-12-21T01:39:22.860 回答