Question

我正在尝试编写一个使用画布绘制非常大的图像的故障安全程序（60 MB可能是较高的范围，而10 MB是较低的范围）。我很久以前就发现调用canvas的同步函数toDataURL通常会导致页面在浏览器中崩溃，因此我调整了程序以使用填充符toBlob方法来实现跨浏览器兼容性。我的问题是：使用URL.createObjectURL(blob)方法的Blob网址可以使用多久？

我想知道是否有一种方法可以缓存Blob URL，使其能够持续超出浏览器会话，以防有人想要在一个点上渲染部分图像，关闭浏览器，然后返回并完成稍后通过再次将Blob URL读入画布并从其停止的位置恢复。我注意到this optional autoRevoke argument可能是我正在寻找的，但我想确认我正在尝试做的事实际上是可能的。除非涉及不同的解决方案，否则您的答案中不需要代码示例，如果可以使用此方法或其他方式使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

Answer 1

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

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

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

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

其他一些话题：How to save the window.URL.createObjectURL() result for future use?

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

http://www.html5rocks.com/en/tutorials/file/filesystem/有一本很好的入门书。

Blob持续多久了？

1 个答案:

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