Blob持续多久了？ [英] How long does a Blob persist?

问题描述

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

I'm trying to write a fail-safe program that uses the canvas to draw very large images (60 MB is probably the upper range, while 10 MB is the lower range). I have discovered long ago that calling the canvas's synchronous function toDataURL usually causes the page to crash in the browser, so I have adapted the program to use the toBlob method using a filler for cross-browser compatibility. My question is this: How long do Blob URLs using the URL.createObjectURL(blob) method last?

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

I would like to know if there's a way to cache the Blob URL that will allow it to last beyond the browser session in case somebody wants to render part of the image at one point, close the browser, and come back and finish it later by reading the Blob URL into the canvas again and resuming from the point at which it left off. I noticed that this optional autoRevoke argument may be what I'm looking for, but I'd like a confirmation that what I'm trying to do is actually possible. No code example is needed in your answer unless it involves a different solution, all I need is a yes or no on if it's possible to make a Blob URL last beyond sessions using this method or otherwise. (This would also be handy if for some reason the page crashes and it acts like a "restore session" option too.)

我在考虑这样的事情：

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
  }
}

注意我不确定这会按照我的意图行事，所以任何确认都会很棒。

Note that I am not certain this will work the way I intend, so any confirmation would be awesome.

EDIT 刚才意识到 sessionStorage 与 localStorage 不同：P

EDIT just realized that sessionStorage is not the same thing as localStorage :P

推荐答案

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

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

Blob URL can last across sessions? Not the way you want it to.

The URL is a reference represented as a string, which you can save in localStorage just like any string. The location that URL points to is what you really want, and that won't persist across sessions.

将URL.toObjectUrl（）与<$ c结合使用时$ c> autoRevoke 参数，URL将一直存在，直到您调用 revokeObjectUrl 或直到执行卸载文档清理步骤。 （此处列出的步骤： http：//www.w3 .org / TR / html51 / browsers.html＃unloading-document-cleanup-steps ）

When using URL.toObjectUrl() in conjuction with the autoRevoke argument, the URL will persist until you call revokeObjectUrl or "till the unloading document cleanup steps are executed." (steps outlined here: http://www.w3.org/TR/html51/browsers.html#unloading-document-cleanup-steps)

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

My guess is that those steps are being executed when the browser session expires, which is why the target of your blobURL can't be accessed in subsequent sessions.

其他一些话题：如何保存窗口。 URL.createObjectURL（）结果供将来使用？

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

The above leads to a recommendation to use the FileSystem API to save the blob representation of your canvas element. When requesting the file system the first time, you'll need to request PERSISTENT storage, and the user will have to agree to let you store data on their machine permanently.

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

http://www.html5rocks.com/en/tutorials/file/filesystem/ has a good primer everything you'll need.

这篇关于Blob持续多久了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！