Browser HTML Force download of image from src data image jpeg base64

Question

I am generating a image on client side and I display it with HTML like this    lt img src  data image jpeg base64  9j 4AAQSkZJRgABAQAAAQABAAD 2wBDAAMCAgICAgM       gt    I want to offer the possibility to download the generated Image   How can I realize that the browser is opening a file save dialoge  or just download the image like chrome or firefox to the download folder would do  which allows the user to save the image without doing right click and save as on the image   I would prefer a solution without server interaction  So I am aware that it would be possible if I first upload the Image and then start the download   Thanks a lot

User · Answer

you can use the download attribute on an a tag ...

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>

see more: https://developer.mozilla.org/en/HTML/element/a#attr-download

User · Answer

Simply replace image jpeg with application octet-stream  The client would not recognise the URL as an inline-able resource  and prompt a download dialog   A simple JavaScript solution would be     var img   reference to image var url   img src replace   data image           data application octet-stream    window open url      Or perhaps  location href   url     Or even setting the location of an  lt iframe gt  element     Another method is to use a blob  URI   var img   document images 0   img onclick   function               atob to base64 decode the data-URI        var image data   atob img src split      1           Use typed arrays to convert the binary data to a Blob        var arraybuffer   new ArrayBuffer image data length          var view   new Uint8Array arraybuffer          for  var i 0  i lt image data length  i                   view i    image data charCodeAt i   amp  0xff               try              This is the recommended method          var blob   new Blob  arraybuffer    type   application octet-stream           catch  e               The BlobBuilder API has been deprecated in favour of Blob  but older            browsers don t know about the Blob constructor            IE10 also supports BlobBuilder  but since the  Blob  constructor             also works  there s no need to add  MSBlobBuilder           var bb   new  window WebKitBlobBuilder    window MozBlobBuilder              bb append arraybuffer              var blob   bb getBlob  application octet-stream        lt -- Here s the Blob               Use the URL object to create a temporary URL       var url    window webkitURL    window URL  createObjectURL blob          location href   url      lt -- Download       Relevant documentation   atob Typed arrays URL createObjectURL Blob and BlobBuilder

User · Answer

Take a look at FileSaver js  It provides a handy saveAs function which takes care of most browser specific quirks

User · Answer

I guess an img tag is needed as a child of an a tag  the following way    lt a download  YourFileName jpeg  href  data image jpeg base64 iVBO   CYII   gt       lt img src  data image jpeg base64 iVBO   CYII   gt  lt  img gt   lt  a gt    or   lt a download  YourFileName jpeg  href   path to OtherFile jpg  gt       lt img src   path to OtherFile jpg  gt  lt  img gt   lt  a gt    Only using the a tag as explained in  15 didn t worked for me with the latest version of Firefox and Chrome  but putting the same image data in both a href and img src tags worked for me   From JavaScript it could be generated like this   var data   canvas toDataURL  image jpeg     var img   document createElement  img    img src   data   var a   document createElement  a    a setAttribute  download    YourFileName jpeg    a setAttribute  href   data   a appendChild img    var w   open    w document title    Export Image   w document body innerHTML    Left-click on the image to save it    w document body appendChild a

[javascript] Browser/HTML Force download of image from src="data:image/jpeg;base64..."

Examples related to javascript

Examples related to image

Examples related to html

Examples related to browser