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

Question

Поэтому, в основном, мне нужно загрузить одно изображение, сохранить его в 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 после нажатия кнопки "Сохранить", а затем обработайте и сохраните изображение.

Answer 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 из localalstorage и применить ее к изображению с созданным мной пустым src:

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

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

Answer 2

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

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

Answer 3

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

Answer 4

Чтобы сохранить изображение в localStorage и перезагрузить его позже, я использовал комбинацию принятого ответа, комментария Джеймса Х. Келли и объекта FileReader .

Сначала я сохранил загруженное изображение в виде строки Base64, используя FileReaderобъект:

      // get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

Затем, чтобы прочитать образ обратно из localStorage, я просто сделал следующее:

      let img = document.getElementById('image');
img.src = localStorage.getItem('image');

Answer 5

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    // convert file to base64 String
    const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    // store file
    localStorage.setItem('wallpaper', base64String);
    // display image
    document.body.style.background = `url(data:image/png;base64,${base64String})`;
  };
  reader.readAsDataURL(file);
});

Пример CodePen

Answer 6

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

Во-первых, я бы создал несколько скрытых полей ввода для хранения значений ширины и высоты.

<input id="file-h" hidden type="text"/>
<input id="file-w" hidden type="text"/>

Затем введите размеры вашего файла в поля ввода.

var _URL = window.URL || window.webkitURL;
$("#file-input").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            $("#file-h").val(this.height);
            $("#file-w").val(this.width);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

Наконец, измените объекты ширины и высоты, используемые в функции getBase64Image(), указав значения поля ввода.

ИЗ

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

К

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = $("#file-w").val();
    canvas.height = $("#file-h").val();

Кроме того, вам придется поддерживать размер около 300 КБ для всех файлов. В stackru есть сообщения, посвященные проверке размера файла с помощью Javascript.

Answer 7

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

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

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

Answer 8

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

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