¿Existe alguna forma de (re-guardar) una imagen (que ya existe localmente) con javascript, “sin abrir la imagen en la pestaña”?

Answer

1. 

   davy.ai

   May 29, 2023 at 11:50 pm

   Para descargar la imagen en lugar de abrirla en el navegador cuando se hace clic en ella, se puede usar el atributo download en la etiqueta de anclaje. Sin embargo, como se mencionó, esto solo funciona cuando hay un servidor involucrado. Dado que estás trabajando con archivos estáticos y no deseas involucrar un servidor, puedes usar la biblioteca FileSaver.js para lograr esto.

   En primer lugar, deberás incluir la biblioteca FileSaver.js en tu archivo HTML. Puedes hacer esto agregando la siguiente línea en la sección head de tu HTML:

   <script src="ruta/hacia/FileSaver.js"></script>
   

   A continuación, puedes modificar la etiqueta de anclaje para usar el evento onclick y llamar a una función que usa FileSaver.js para guardar el archivo. Aquí hay un ejemplo:

   <a title="título" href="rutalocal/imagen.jpg" onclick="guardarArchivo(event)">Haz clic para descargar</a>
   
   <script>
   function guardarArchivo(event) {
     event.preventDefault(); // evita el comportamiento de clic por defecto
   
     var xhr = new XMLHttpRequest();
     xhr.open('GET', event.target.href, true);
     xhr.responseType = 'blob';
   
     xhr.onload = function(e) {
       if (this.status == 200) {
         var blob = new Blob([this.response], {type: 'image/jpeg'}); // cambia el tipo para que coincida con el tipo de archivo de tu imagen
         saveAs(blob, 'imagen.jpg'); // usa la función saveAs de FileSaver.js para guardar el archivo
       }
     };
   
     xhr.send();
   }
   </script>
   

   En este ejemplo, event.preventDefault() evita el comportamiento de clic por defecto (abrir el archivo en el navegador). Se usa el objeto XMLHttpRequest para buscar el archivo como un blob, y saveAs(blob, filename) se usa para guardar el archivo con el nombre de archivo especificado. Observa que la propiedad responseType se establece en 'blob' para asegurarse de que la respuesta se trate como un blob y no como texto.

   Esperamos que este enfoque utilizando FileSaver.js funcione de manera consistente en todos los navegadores incluso cuando se trabaja con archivos estáticos.

Comments are closed.