Как сохранять изображения в localStorage?

#javascript #html #jquery #ajax #localstorage

Есть браузерное  приложение (не сайт), для которого нужна такая функция, как cохранять
изображение с удаленного url в localStorage. Для того, что бы потом можно выводить
в тело dom из локлаьного хранилище . Кто уже такое практиковал поделитесь советом как
это реализовать?
    

Ответы

Ответ 1

Вам понадобится преобразование изображения в Base64:

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,/, "");
}


Теперь вы можете получить изображение из DOM (допустим в целях кэширования), преобразовать
его в Base64 и сохранить в localStorage:

var image = document.getElementById('imageId');
var b64image = getBase64Image(image);
localStorage.setItem('imageIdCached', b64image);


Как использовать такое изображение?

var dataImage = localStorage.getItem('imageIdCached');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;