Выполнение скрипта после потери сети

[Валерий1996]

Есть скрипт который берет изображения перекодирует в base64, потом загоняет изображения в локальное хранилище. Потом достает с локального хранилища и выводит в dom. Как сделать , чтоб та часть скрипта которая отвечает за вывод в dom срабатывала, и в онлайн и офлайн режымме? То есть пользователь обновил браузер а картинки остались ?

Вот мой код :

<img id="bannerImg" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg" />
<img id="tableBanner" class="image" crossOrigin="*" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Richard_of_Shrewsbury%2C_1._Duke_of_York.jpg?download" />

var images = document.querySelectorAll('.image');
if (images.length > 0) {
    // в Storage
    var dataArray = [];
    for (var i = 0, itemsLength = images.length; i < itemsLength; i++) {
        dataArray.push({
            img: getBase64Image(images[i]),
            id: images[i].id || ''
        });
    }
 	localStorage.setItem("imagesData", JSON.stringify(dataArray));
    
    //из Storage
    var storageArray = JSON.parse(localStorage.getItem('imagesData'));
    if (Array.isArray(storageArray)) {
        storageArray.map(function (dataImage) {
            var element = document.getElementById(dataImage.id);
            if (element) {
                element.src = "data:image/png;base64," + dataImage.img;
            }
        });
    }
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Вот весь код в фидле: http://jsfiddle.net/zolotnitskiy/4ra8nhk4/4/

[laimas]

canvas.toDataURL("image/png"); - canvas по умолчанию и возвращает формат png, то есть не нужно указывать, хотя лучше jpeg сохранять, так как в этом случае размер гораздо меньший будет.

dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); - а это зачем?

[Валерий1996]

Для возврата изображения

[laimas]

Так в нем и пишется в этом случае <img src="data:image/ext;base64,.....", зачем вырезать?

[Валерий1996]

Эта часть кода взята с англоязычного стэк оверфлоу, я сам без понятия. Нашел по запросу перевод в base64.

[Валерий1996]

Но мы немного отклонились от темы вопроса)))

[laimas]

Значит сохранение не для вашего случая.

И вряд ли такое

img: getBase64Image(images[i]),
id: images[i].id || ''

удачное решение, потому, что если вы хотите загружать сохраненное онлайн/оффлайн, то нужно проверять если ли сохраненное, и если есть, то получать сохраненное, иначе загружать по сети. А как проверять? Как раз и нужен идентификатор, то есть лучше так

images[i].id : getBase64Image(images[i]).

Но это еще не все, если на сервере изображение обновится, то клиент загрузит не новое, а сохраненное. То есть проверка по ID не решение в этом случае, нужно как-то знать еще, что изображение обновлено сервером. Если именовать изображения например как md5(временная метка), то в этом случае достаточно будет проверить свойство images[i].id, и если оно не равно сетевому имени, то загрузка и сохранение нового. Но чтобы это проверить, src изображения на странице должно быть указано, а это означает загрузка его по сети, то есть сохранение теряет смысл, если ее предварительно не блокировать.

Кроме localStorage существует и sessionStorage, и чтобы не забивать компьютер пользователя, может быть лучше использовать его. Если же серьезно рассматривать онлайн/оффлайн, то лучше автономное приложение.