Как сохранить изображение на localStorage и отобразить его на следующей странице?

Итак, в основном, мне нужно делать, как говорится в заголовке; Загрузите одно изображение, сохраните его в localStorage, затем отобразите его на следующей странице.

В настоящее время у меня есть загрузка файла HTML:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Использует эту функцию для отображения изображения на странице

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Изображение отображается мгновенно на странице для просмотра пользователем. Затем их просят заполнить остальную часть формы. Эта часть работает отлично.

Как только форма будет завершена, они затем нажмите кнопку "Сохранить" . Когда эта кнопка нажата, я сохраняю все входные данные формы как строки localStorage. Мне нужен способ сохранить изображение как элемент localStorage.

Кнопка сохранения также направит их на новую страницу. На этой новой странице будут отображаться данные пользователей в таблице с изображением вверху.

Так просто и просто, мне нужно сохранить изображение в localStorage после нажатия кнопки "Сохранить" , а затем списать изображение на следующей странице с localStorage.

Я нашел некоторые решения, такие как эта скрипта: http://jsfiddle.net/8V9w6/

И это: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Хотя я все еще очень смущен тем, как это работает, и мне действительно нужно простое решение. В принципе, мне просто нужно найти изображение через getElementByID после нажатия кнопки "Сохранить" , а затем обработать и сохранить изображение.

Вся помощь очень ценится. Спасибо!

Ответ 1

Кому нужна эта проблема:

Во-первых, я захватываю свое изображение с помощью getElementByID и сохраняю изображение как Base64. Затем я сохраняю строку Base64 как значение localStorage.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

Вот функция, которая преобразует изображение в свойство 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,/, "");
}

Затем на моей следующей странице я создал изображение с пустым src следующим образом:

<img src="" id="tableBanner" />

И прямо, когда страница загружается, я использую следующие три строки, чтобы получить строку base64 из localstorage и применить ее к изображению с помощью пустого src, который я создал:

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

Протестировал его в нескольких разных браузерах и версиях, и, похоже, он работает неплохо.

Ответ 2

Я написал небольшую 2,2kb библиотеку сохранения изображения в localStorage JQueryImageCaching Использование:

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

Ответ 3

Вы можете сериализовать изображение в URI данных. В этом блоге размещен учебник. Это создаст строку, которую вы можете сохранить в локальном хранилище. Затем на следующей странице используйте данные uri в качестве источника изображения.