I have a base64 string image in my html page now I want to force the download through JavaScript this image.
Answer
Option 1.
Simple you can download your base64 string image like as given below
window.location.href = 'data:application/octet-stream;base64,' + <your base64 encoded image>;or if you want to to allow the user to specify a file name, use the download attribute as a tag you can do that
<a download="FILENAME.EXT" href="data:image/png;base64,your-base64-string-code">Download</a>Option 2.
var bses64Image= "data:image/" + bses64Image;
$('#download').attr('href', bses64Image);
Add the file name that you want when downloading to the download tag.
<a download="image-name.png" id="download">download img</a>Option 3.
There are different types of techniques to download bases64string images, but as a fan of asynchronous programming, I recommend creating a Promise then using the FileReader API to convert the blob:
convertBlobToBase64 = (blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
const base64String = await convertBlobToBase64(blob);
Option 4.
You can also use this solution.
const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = pageImage.naturalWidth;
canvas.height= pageImage.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.drawImage(pageImage, 0, 0);
saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
let fileName = "image"
const link = document.createElement('a');
link.download = fileName + '.png';
canvas.toBlob(function(blob) {
console.log(blob)
link.href = URL.createObjectURL(blob);
link.click();
});
};
Option 5.
function downloadBase64File(contentType, base64Data, fileName) {
const linkSource = `data:${contentType};base64,${base64Data}`;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
Option 6.
You can use the following code to convert a base64 string to an image and download it in JavaScript:
// Convert the base64 string to a byte array
var byteArray = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));
// Create a Blob from the byte array
var blob = new Blob([byteArray], {type: 'image/jpeg'});
// Create an object URL for the Blob
var url = URL.createObjectURL(blob);
// Create a link element
var a = document.createElement('a');
// Set the link element's href and download attributes
a.href = url;
a.download = 'image.jpeg';
// Append the link element to the document
document.body.appendChild(a);
// Click the link element to trigger the download
a.click();
// Remove the link element from the document
document.body.removeChild(a);
// Revoke the object URL
URL.revokeObjectURL(url);
In this code, the atob function is used to decode the base64 string, and the Uint8Array.from function is used to convert the decoded string to a byte array. The byte array is then used to create a Blob object, which is a file-like object that can be used to create an object URL.
The object URL is set as the href attribute of a link element, and the link element is appended to the document. When the link element is clicked, the download is triggered and the image is saved to the user's computer. Finally, the link element is removed from the document and the object URL is revoked to release the memory used by the Blob.
The object URL is set as the href attribute of a link element, and the link element is appended to the document. When the link element is clicked, the download is triggered and the image is saved to the user's computer. Finally, the link element is removed from the document and the object URL is revoked to release the memory used by the Blob.
Comments