Blob持续多久了？

Question

我正在尝试编写一个使用画布绘制非常大的图像的故障安全程序(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
  }
}

请注意,我不确定这将按照我的意图运作,所以任何确认都会很棒.

EDIT刚刚意识到这sessionStorage与localStorageP 不是一回事:P

Answer 1

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来保存canvas元素的blob表示.在第一次请求文件系统时,您需要请求PERSISTENT存储,并且用户必须同意让您永久地将数据存储在他们的计算机上.

http://www.html5rocks.com/en/tutorials/file/filesystem/有一个很好的入门书,你需要的一切.