How to save a base64 image to user’s disk using JavaScript?

by

HTML5 download attribute

Just to allow user to download the image or other file you may use the HTML5 download attribute.

Static file download

<a href="/images/image-name.jpg" download>
<!-- OR -->
<a href="/images/image-name.jpg" download="new-image-name.jpg">

Dynamic file download

In cases requesting image dynamically it is possible to emulate such download.

If your image is already loaded and you have the base64 source then:

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

Otherwise if image file is downloaded as Blob you can use FileReader to convert it to 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

The anchor tag you are creating also needs to be added to the DOM in Firefox, in order to be recognized for click events (Link).

IE is not supported: Caniuse link

More Related Contents:

  1. How to download a base64-encoded image?
  2. How do I make two images fade in/out repeatedly? [closed]
  3. how to proportionally scale a div with images inside?
  4. Render HTML to an image
  5. How To Save Canvas As An Image With canvas.toDataURL()?
  6. Should setting an image src to data URL be available immediately?
  7. Using JavaScript to display a Blob
  8. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  9. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  10. How to silently hide “Image not found” icon when src source image is not found
  11. How to display image with JavaScript?
  12. Using raw image data from ajax request for data URI
  13. Convert binary data to base64 with javascript
  14. Can I get image from canvas element and use it in img src tag?
  15. JS – get image width and height from the base64 code
  16. How do image preloaders work?
  17. Adding images to an HTML document with JavaScript
  18. How do I abort image load requests without using window.stop()
  19. Load image from url and draw to HTML5 Canvas
  20. React-Native: Convert image url to base64 string
  21. How to flip images horizontally with HTML5
  22. Get image width and height from the Base64 code in JavaScript
  23. JavaScript loading progress of an image
  24. Change image in HTML page every few seconds
  25. Is there a way to load images to user’s cache asynchronously?
  26. createImageBitmap alternative on Safari
  27. ReadFile in Base64 Nodejs
  28. How much data / information can we save / store in a QR code?
  29. Center an Image vertically and horizontally using CSS
  30. Using base64-encoded images with HtmlService in Apps Script

Leave a Comment