imagen - localstorage javascript array

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

Question

Entonces, básicamente, tengo que hacer lo que dice el título; Suba una sola imagen, guárdela en localStorage, luego muéstrela en la página siguiente.

Actualmente, tengo mi carga de archivo HTML:

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

Que usa 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. Luego se les pide que completen el resto del formulario. Esta parte está funcionando perfectamente.

Una vez que se completa el formulario, luego presionan el botón "Guardar". Una vez que se presiona este botón, localStorage todas las entradas de 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.

Así de simple, necesito guardar la imagen en localStorage una vez que se presiona el botón ''Guardar'', y luego prestar la imagen en la página siguiente de localStorage .

Encontré algunas soluciones como este violín: http://jsfiddle.net/8V9w6/

Y esto: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Aunque todavía estoy muy confundido sobre cómo funciona esto, y realmente 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.

Toda ayuda es muy apreciada. ¡Gracias!

Answer 1

Escribí una pequeña biblioteca de 2.2kb para guardar imágenes en localStorage JQueryImageCaching Uso:

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

Answer 2

Para quien también necesita resolver este problema:

En primer lugar, tomo mi imagen con getElementByID y getElementByID la imagen como 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 próxima página, creé una imagen con un src en blanco como ese:

<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;

Probado en bastantes navegadores y versiones diferentes y parece funcionar bastante bien.

Answer 3

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