Menu
I have converted the source content from the <img> 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.
<html> <head> <script> 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); } </script> </head> <body> <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> <img id="embedImage" alt="Red dot"> </body> </html> This code worked well when I set the image path as source for <img> html tag. However, when I pass the source as base64String does not work.
How to achieve what I want?
423
To save a base64-encoded image to disk with Node. js, we can use the fs. writeFile method.
This is how you do it: var save = document. createElement('a'); save. href = $('#myImageID').
Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON. By including image data within an HTML document, the browser doesn't need to make an additional web request to fetch the file, since the image is already embedded in the HTML document.
data:image/png;base64 tells the browser that the data is inline, is a png image and is in this case base64 encoded. The encoding is needed because png images can contain bytes that are invalid inside a HTML document (or within the HTTP protocol even).
download attributeJust 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
85
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:
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'); }); });<!DOCTYPE html> <html> <body> <img id="embedImage" alt="Red dot" /> <button id="saveImage" disabled="disabled">save image</button> </body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
