Я пытаюсь написать отказоустойчивую программу, которая использует холст для рисования очень больших изображений (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
}
}
Обратите внимание, что я не уверен, что это будет работать так, как я задумал, поэтому любое подтверждение будет потрясающим.
EDIT только что понял, что sessionStorage
— это не то же самое, что localStorage
:P