Как долго сохраняется Blob?

Question

Я пытаюсь написать отказоустойчивую программу, которая использует холст для рисования очень больших изображений (60 МБ, вероятно, верхний диапазон, а 10 МБ - нижний диапазон). Я давно обнаружил, что вызов синхронной функции холста toDataURL обычно вызывает сбой страницы в браузере, поэтому я адаптировал программу для использования toBlob метод с использованием наполнителя для кросс-браузерной совместимости. Мой вопрос заключается в следующем: как долго URL-адреса Blob используют URL.createObjectURL(blob) метод последний?

Я хотел бы знать, есть ли способ кеширования URL-адреса BLOB-объекта, который позволит ему сохраняться после сеанса браузера, если кто-то захочет визуализировать часть изображения в одной точке, закрыть браузер, а затем вернуться и завершить его позже, снова прочитав URL-адрес BLOB-объекта на холсте и возобновив его с того места, на котором он остановился. Я заметил, что этот необязательный аргумент autoRevoke может быть тем, что я ищу, но я хотел бы получить подтверждение того, что то, что я пытаюсь сделать, действительно возможно. В вашем ответе не требуется пример кода, если только в нем не предусмотрено другое решение, все, что мне нужно, это да или нет, если можно сделать URL-адрес BLOB-объекта последним после сеансов с использованием этого метода или иным образом. (Это также было бы удобно, если по какой-то причине страница падает, и она также работает как опция "восстановления сеанса".)

Я думал о чем-то вроде этого:

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:П

Answer 1

URL-адрес BLOB-объекта может длиться через сеансы Не так, как вы хотите.

URL - это ссылка, представленная в виде строки, которую вы можете сохранить в localStorage, как и любую строку. Местоположение, на которое указывает URL, это то, что вы действительно хотите, и оно не будет сохраняться в течение сеансов.

При использовании URL.toObjectUrl() в сочетании с autoRevoke аргумент, URL будет сохраняться, пока вы не позвоните revokeObjectUrl или "до тех пор, пока не будут выполнены шаги по очистке документа". (шаги описаны здесь: http://www.w3.org/TR/html51/browsers.html)

Я предполагаю, что эти шаги выполняются, когда сеанс браузера истекает, поэтому цель вашего blobURL недоступны в последующих сеансах.

Некоторые другие рассуждения об этом: Как сохранить результат window.URL.createObjectURL() для будущего использования?

Вышеприведенное приводит к рекомендации использовать API-интерфейс FileSystem для сохранения блоб-представления вашего элемента canvas. Когда вы запрашиваете файловую систему в первый раз, вам нужно запросить PERSISTENT хранилище, и пользователь должен будет согласиться позволить вам постоянно хранить данные на своем компьютере.

http://www.html5rocks.com/en/tutorials/file/filesystem/ есть хороший учебник, в котором есть все, что вам нужно.