¿Cómo guardar una imagen base64 en el disco del usuario usando JavaScript?

Descarga de archivos dinámicos

En los casos en que se solicite imagen de forma dinámica es posible emular dicha descarga.

Si su imagen ya está cargada y tiene la base64 fuente entonces:

function saveBase64AsFile(base64, fileName) 
    var link = document.createElement("a");

    document.body.appendChild(link); // for Firefox

    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();

De lo contrario, si el archivo de imagen se descarga como Blob puedes usar FileReader para convertirlo a Base64:

function saveBlobAsFile(blob, fileName) 
    var reader = new FileReader();

    reader.onloadend = function ()     
        var base64 = reader.result ;
        var link = document.createElement("a");

        document.body.appendChild(link); // for Firefox

        link.setAttribute("href", base64);
        link.setAttribute("download", fileName);
        link.click();
    ;

    reader.readAsDataURL(blob);

Firefox

La etiqueta de anclaje que está creando también debe agregarse al DOM en Firefox, para que sea reconocida por los eventos de clic (Enlace).

IE no es compatible: enlace caniuse

En JavaScript no puede tener acceso directo al sistema de archivos. Sin embargo, puede hacer que el navegador muestre una ventana de diálogo que le permita al usuario elegir la ubicación para guardar. Para hacer esto, utilice el replace método con su Base64String y reemplace "image/png" con "image/octet-stream":

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

Además, los navegadores compatibles con W3C proporcionan 2 métodos para trabajar con datos binarios y codificados en base64:

• de la A, a la B()
• btoa()

Probablemente, los encontrará útiles de alguna manera…

Aquí hay una versión refactorizada de lo que entiendo que necesita:

window.addEventListener('DOMContentLoaded', () => 
  const img = document.getElementById('embedImage');
  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' +
    'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
    '9TXL0Y4OHwAAAABJRU5ErkJggg==';

  img.addEventListener('load', () => button.removeAttribute('disabled'));
  
  const button = document.getElementById('saveImage');
  button.addEventListener('click', () => 
    window.location.href = img.src.replace('image/png', 'image/octet-stream');
  );
);

  






  save image

Reseñas y calificaciones