Как сохранить изображение в 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.

Я нашел некоторые решения, такие как эта скрипка и эта статья в moz: // a HACKS .

Хотя я до сих пор не совсем понимаю, как это работает, и мне действительно нужно только простое решение. По сути, мне просто нужно найти изображение при getElementByIDнажатии кнопки «Сохранить», а затем обработать и сохранить изображение.

Для тех, кто также нуждается в решении этой проблемы:

Во-первых, я хватаю свое изображение 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 Кбайт в LocalStorage JQueryImageCaching Использование:

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

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

Msgstr "Обратите внимание, что сначала вам нужно полностью загрузить изображение (в противном случае заканчиваются пустыми изображениями), поэтому в некоторых случаях вам нужно будет обернуть обработку в: bannerImage.addEventListener (" load ", function () {}); - Юга 1 ноября '17 в 13:04 "

Это очень важно. Одна из опций, которую я изучаю сегодня днем, - это использование методов обратного вызова javascript, а не addEventListeners, поскольку, похоже, это тоже не связывает правильно. Подготовка всех элементов перед загрузкой страницы БЕЗ обновления страницы имеет решающее значение.

Если кто-то может расширить это, пожалуйста, сделайте, например, использовали ли вы settimeout, wait, callback или addEventListener для получения желаемого результата. Какой и почему?

У меня возникла та же проблема, вместо хранения изображений, которые в конечном итоге переполняют локальное хранилище, вы можете просто сохранить путь к изображению. что-то вроде:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);