¿Cómo guardar una imagen en localStorage y mostrarla en la página siguiente?

Así que, básicamente, necesito cargar una sola imagen, guardarla en localStorage, luego mostrarla en la página siguiente.

Actualmente, tengo mi archivo HTML cargado: 

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

, Que utiliza esta función para mostrar la imagen en la página

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]);
    }
}

La imagen se muestra instantáneamente en la página para que el usuario la vea. A continuación, se les pide que rellenen el resto del formulario. Esta parte está funcionando perfectamente.

Una vez que el formulario está completo, a continuación, pulse un botón 'Guardar'. Una vez que esto se presiona el botón, guardo todas las entradas del formulario como cadenas localStorage. Necesito una forma de guardar también la imagen como un elemento localStorage.

El botón guardar también los dirigirá a una nueva página. Esta nueva página mostrará los datos de los usuarios en una tabla, con la imagen en la parte superior.

Tan simple y llanamente, necesito guardar la imagen en localStorage una vez que se presione el botón 'Guardar', y luego prestar la imagen en la siguiente página desde localStorage.

Encontré algunas soluciones como este violín y este artículo en moz: / / a HACKS .

Aunque todavía estoy extremadamente confundido sobre cómo funciona esto, y solo necesito una solución simple. Básicamente, solo necesito encontrar la imagen a través de getElementByID una vez que se presiona el botón 'Guardar', y luego procesar y guardar la imagen.

Author: brasofilo, 2013-10-04
Source

4 answers

A quien también necesita este problema resuelto:

En primer lugar, tomo mi imagen con getElementByID y guardo la imagen como una Base64. Luego guardo la cadena Base64 como mi valor localStorage.

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

Aquí está la función que convierte la imagen en una picadura 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,/, "");
}

Luego, en mi siguiente página creé una imagen con un src en blanco como así:

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

Y directamente cuando se carga la página, utilizo estas tres líneas siguientes para obtener la cadena base64 de localstorage y aplicarla a la imagen con el src en blanco que creé: 

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

Lo probó en bastantes navegadores y versiones diferentes y parece funcionar bastante bien.

 159
Author: Fizzix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-13 23:28:59

Escribí una pequeña biblioteca de 2,2 kb de guardar imagen en localStorage JQueryImageCaching Uso:

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
 8
Author: moledet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-03 13:16:01

Puede serializar la imagen en un URI de datos. Hay un tutorial en esta entrada de blog . Eso producirá una cadena que puede almacenar en el almacenamiento local. Luego, en la página siguiente, use el uri de datos como fuente de la imagen.

 6
Author: Ray Wadkins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-04 14:05:10

"Tenga en cuenta que primero debe tener la imagen completamente cargada (de lo contrario, tendrá imágenes vacías), por lo que en algunos casos tendrá que envolver el manejo en: bannerImage.addEventListener ("load", function () {}) – - yuga Nov 1 '17 at 13:04"

Esto es extremadamente IMPORTANTE. Una de las opciones que estoy explorando esta tarde es usar métodos de devolución de llamada javascript en lugar de addEventListeners, ya que tampoco parece que se vincule correctamente. Tener todos los elementos listos antes de cargar la página SIN una actualización de página es fundamental.

Si alguien puede ampliar esto, por favor, haga lo siguiente: ¿utilizó un método settimeout, wait, callback o addEventListener para obtener el resultado deseado? Cuál y por qué?

 0
Author: Andrew Ellison Pembroke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-17 18:46:50