This piece of code below is supposed to convert the raw image to base64 string.
let base1="";
let base2="";
let base3="";
let base64String="";
var img=new Image();
var img1=new Image();
var img2=new Image();
img.src='Screenshot (1).png';
img1.src='Screenshot (2).png';
img2.src='Screenshot (3).png';
var reader = new FileReader();
reader.onload = function () {
base64String = reader.result.replace("data:", "")
.replace(/^.+,/, "");
}
reader.readAsDataURL(img);
base1=base64String;
reader.readAsDataURL(img1);
base2=base64String;
reader.readAsDataURL(img2);
base3=base64String;
But when I execute the code, I get the following error:
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
Why is that? Please help me fix this.
Because readAsDataURL expects the parameter as Blob. Best method will be to convert to base64 data url using canvas
let base1="";
let base2="";
let base3="";
let base64String="";
var img=new Image();
var img1=new Image();
var img2=new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
base1 = canvas.toDataURL();
}
img.src='Screenshot (1).png';
img1.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img1.width;
canvas.height = img1.height;
ctx = canvas.getContext('2d');
ctx.drawImage(img1, 0, 0);
base2 = canvas.toDataURL();
}
img1.src='Screenshot (2).png';
img2.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img2.width;
canvas.height = img2.height;
ctx = canvas.getContext('2d');
ctx.drawImage(img2, 0, 0);
base2 = canvas.toDataURL();
}
img2.src='Screenshot (3).png';
The canvas.toDataURL() without param will generate a data url of type png if if the img src is a jpg