2

tengo varios tag img en mi html, y el src es una ruta externa a mi servidor, cada vez que recargo la pagina debo esperar que las imágenes se carguen, se que existe el LocalStorage pero no se como guardar la imagen como tal, solo he podido guardar el link

1
  • lo mejor que puedes hacer es agregar políticas de caché a las cabeceras HTTP, eso evitará que el navegador cargue las imágenes cada vez que entre. Commented el 12 sept. 2018 a las 2:26

1 respuesta 1

3

Lo que quieres hacer es posible gracias a que puedes guardar la imagen como Base64, te mostrare como, ojo esta respuesta no es originalmente mía pero funciona, esta posteada en StackOverflow en ingles véase el enlace

En primer lugar, tomo mi imagen getElementByIDy guardo 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 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:

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

Edito para agregar como verificar si la variable no existe;

if (localStorage.getItem("mi_variable") === null) {
  //Aqui se ejecuta todo si no existe
}

Esto no funciona con gif ya que los gif no son compatibles con canvas

2
  • Gracias por la respuesta, cuando guarde la imagen en local storage, luego como verifico si existe la imagen en local storage, y de no ser asi como la muestro normalmente Commented el 12 sept. 2018 a las 15:16
  • @darioxlz para esto simplemente haces if (localStorage.getItem("mi_variable") === null) { //... } de igual manera lo colocare en la respuesta Commented el 12 sept. 2018 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.