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

Question

I have converted the source content from the  lt img gt  html tag to a base64String using JavaScript  The image was displayed clearly  Now I want to save that image to user s disk using javascript    lt html gt       lt head gt       lt script gt          function saveImageAs                  var imgOrURL              embedImage src    data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAUA                                  AAAFCAYAAACNbyblAAAAHElEQVQI12P4  8 w38GIAXDIBKE0DHxgljNBAAO                                  9TXL0Y4OHwAAAABJRU5ErkJggg                 imgOrURL   embedImage              if  typeof imgOrURL     object                   imgOrURL   embedImage src              window win   open imgOrURL               setTimeout  win document execCommand  SaveAs     0                  lt  script gt       lt  head gt       lt body gt           lt a href     ONCLICK  saveImageAs    return false   gt save image lt  a gt            lt img id  embedImage  alt  Red dot  gt       lt  body gt   lt  html gt    This code worked well when I set the image path as source for  lt img gt  html tag  However  when I pass the source as base64String does not work   How to achieve what I want

User · Answer

In JavaScript you cannot have the direct access to the filesystem. However, you can make browser to pop up a dialog window allowing the user to pick the save location. In order to do this, use the replace method with your Base64String and replace "image/png" with "image/octet-stream":

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

Also, W3C-compliant browsers provide 2 methods to work with base64-encoded and binary data:

Probably, you will find them useful in a way...

Here is a refactored version of what I understand you need:

_x000D_

window.addEventListener('DOMContentLoaded', () => {_x000D_
  const img = document.getElementById('embedImage');_x000D_
  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' +_x000D_
    'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +_x000D_
    '9TXL0Y4OHwAAAABJRU5ErkJggg==';_x000D_
_x000D_
  img.addEventListener('load', () => button.removeAttribute('disabled'));_x000D_
  _x000D_
  const button = document.getElementById('saveImage');_x000D_
  button.addEventListener('click', () => {_x000D_
    window.location.href = img.src.replace('image/png', 'image/octet-stream');_x000D_
  });_x000D_
});

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<body>_x000D_
  <img id="embedImage" alt="Red dot" />_x000D_
  <button id="saveImage" disabled="disabled">save image</button>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

User · Answer

HTML5 download attribute Just to allow user to download the image or other file you may use the HTML5 download attribute  Static file download  lt a href  quot  images image-name jpg quot  download gt   lt  -- OR -- gt   lt a href  quot  images image-name jpg quot  download  quot new-image-name jpg quot  gt    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  quot a quot         document body appendChild link      for Firefox      link setAttribute  quot href quot   base64       link setAttribute  quot download quot   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  quot a quot             document body appendChild link      for Firefox          link setAttribute  quot href quot   base64           link setAttribute  quot download quot   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

User · Answer

This Works function saveBase64AsFile base64  fileName        var link   document createElement  quot a quot        document body appendChild link       link setAttribute  quot type quot    quot hidden quot        link href    quot data text plain base64  quot    base64      link download   fileName      link click          document body removeChild link      Based on the answer above but with some changes

[javascript] How to save a base64 image to user's disk using JavaScript?

Examples related to javascript

Examples related to html

Examples related to image

Examples related to base64

Examples related to save