Як зберегти зображення в 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.

Я знайшов такі рішення, як ця скрипка та ця стаття в моді: // 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,2kb в localStorage JQueryImageCaching Використання:

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

Ви можете серіалізувати зображення в URI даних. У цій публікації блогу є підручник . Це дозволить створити рядок, який можна зберігати в локальному сховищі. Потім на наступній сторінці використовуйте дані uri як джерело зображення.

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

Це надзвичайно ВАЖЛИВО. Один із варіантів, які я вивчаю сьогодні вдень, - це використання методів зворотного виклику javascript, а не addEventListeners, оскільки, здається, теж не пов'язується правильно. Підготовка всіх елементів до завантаження сторінки БЕЗ оновлення сторінки є критично важливою.

Якщо хтось може розширити це питання, будь ласка, зробіть це, як і раніше, чи використовували ви час встановлення, очікування, зворотний дзвінок або метод addEventListener, щоб отримати бажаний результат. Який і чому?

Я придумав те саме питання, замість того, щоб зберігати зображення, які з часом переповнюють локальну пам’ять, ви можете просто зберігати шлях до зображення. щось на зразок:

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