Here is an example of how to convert a Base64 string to an image in JavaScript:
// get the Base64 string
var base64String = "data:image/png;base64,iVBORw0KG...";
// create an image element
var img = document.createElement("img");
// set the Base64 string as the source of the image element
img.src = base64String;
// append the image to the body of the document
document.body.appendChild(img);
This will create an image element with the source set to the Base64 string, and add it to the body of the document.
Alternatively, you can use the atob() function to convert Base64 encoded data to a binary string, then use the Uint8Array() and Blob() constructor to convert the binary string to a Blob, then you can use URL.createObjectURL() to convert the Blob to an object URL. Finally, you can use that object URL to set the image's src property.
var img = document.createElement("img");
img.src = URL.createObjectURL(new Blob([new Uint8Array(atob(base64String).split("").map(function(c) {
return c.charCodeAt(0);
}))], {
type: "image/jpeg"
}));
document.body.appendChild(img);The example above assume that the base64 string is a jpeg image, you will need to adjust the type accordingly if it's a different type.
Or
Option 1.
Convert an image into Base64 string using JavaScript
function getBase64Image(src, callback, outputFormat) {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let dataURL;
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
Javascript convert image to base64
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />Option 2.
Convert base64 to image
var proImage= new Image();
proImage.src = 'data:image/png;base64,kiDinsil...';
document.body.appendChild(proImage);
Convert an image into Base64 string using js
function getBase64Image(src, callback, outputFormat) {
const proImage= new Image();
proImage.crossOrigin = 'Anonymous';
proImage.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let fullURLPIC;
canvas.height = proImage.naturalHeight;
canvas.width = proImage.naturalWidth;
ctx.drawImage(proImage, 0, 0);
fullURLPIC = canvas.toDataURL(outputFormat);
callback(fullURLPIC);
};
proImage.src = src;
if (proImage.complete || proImage.complete ==='undefined') {
proImage.src = "data:image/gif;base64,UDUBADUSADFUKBKJADF///IDFINDFIONOINNDFDFSD==";
proImage.src = src;
}
}Option 3.
You can use the following code to convert a Base64 string to an image in JavaScript:
function base64ToImage(base64String) {
var img = new Image();
img.src = "data:image/png;base64," + base64String;
return img;
}You can then use the base64ToImage() function to create an image object from a Base64 string, and append it to the DOM, like this:
var base64String = "iVBORw0KG..."; // your base64 string here
document.body.appendChild(base64ToImage(base64String));
Note: This will create an image element in png format, if your base64 string is of a different format change the "image/png" accordingly.
Option 4.
You can use the atob() function to decode a Base64 string and the Blob() constructor to create a file-like object of immutable, raw data. Then use the URL.createObjectURL() method to create a URL for the object, and set it as the src of an <img> element.
var base64string = "YOUR_BASE_64_STRING";
var blob = new Blob([atob(base64string)], {type: 'image/png'});
var url = URL.createObjectURL(blob); var img = document.getElementById('your-img-id');
img.src = url;
You can also use JavaScript library like jQuery to achieve this by using $.ajax() method like this
var img = document.getElementById('your-img-id');
$.ajax({
url: 'data:image/png;base64,YOUR_BASE_64_STRING',
type: 'POST',
data: '',
dataType: 'text',
processData: false,
success: function(data) {
img.src = 'data:image/png;base64,' + data;
}
});It's important to note that this will work for small images, as it loads the entire image into memory at once. For large images, you may want to consider using a library like FileReader to read the image in chunks.
Option 5.
Here is an example of how to convert a Base64 string to an image using JavaScript:
// Get the Base64 string
var base64String = "YOUR_BASE64_STRING_HERE";
// Create an image element
var img = document.createElement("img");
// Set the Base64 string as the source of the image
img.src = "data:image/png;base64," + base64String;
// Append the image to the document
document.body.appendChild(img);
This code creates an img element, sets its src attribute to a data URI containing the Base64 string (with the appropriate data: image/png;base64, prefix), and then appends the image to the document. The image will be displayed on the webpage.
Note that, in this example, it's assuming that the image is png format, but you should adjust the "data:image/png;base64," accordingly with the format of your image.
Option 6.
You can use the atob() function to convert a base64-encoded string to a binary string, and then create a new Blob object containing the binary data. Then, you can create an Image object and set its src to a URL created from the Blob. Here's an example:
// Convert base64 string to binary data
var binaryData = atob(base64String);
// Create 8-bit unsigned array
var array = new Uint8Array(binaryData.length);
for(var i = 0; i < binaryData.length; i++) {
array[i] = binaryData.charCodeAt(i);
}
// Create a blob
var blob = new Blob([array], {type: "image/jpeg"});
// Create an image and set its src to the URL created from the blob
var img = new Image();
img.src = URL.createObjectURL(blob);
Please note that this code only work with image/jpeg image format.
Comments