We Keep Coding

Unable to convert png image to base64encoded string

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

Display a dataUrl as an image in a canvas

I have 2 canvases, I save the first one as a dataURL, and then try to display it on a second canvas.
I tried many things but nothing shows up.
Here is my code.
How can I fix that ?
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var compCanvas = document.getElementById("final-composition");
var ctx = compCanvas.getContext("2d");
var img = new Image;
img.src = image;
img.width = compCanvas.width;
img.height = compCanvas.height;
img.onload = function(){
ctx.drawImage(img,0,0);
};

JS image to base64 return string

I have code that works fine
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64URL('/img/logo.png', function(base64Img){
console.log(base64Img);
});
But I need to get the result into a variable
convertImgToBase64URL('/img/logo.png', function(base64Img){
var test = base64Img;
});
alert(test);
Any idea how to pass the result to a variable?

try to load base64 img into a canvas

i'm currently trying to load a base64 img into my canvas
console.log('Change');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = stack[1].save;
stack[1].save contains a valid base64 png img URL('data:image/png;base64,xxxxxx'), when i paste this URL into my browser i can see a valid img
The fact is that nothing changes and i dont have any error
If you could help me this will be awesome, thank's

Yes the code you have shared should work OK.
Here is an example
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="
var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+4*i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="
<canvas id="canvas"></canvas>
The only thing that could be wrong is that stack[1].save that you are using...

Select an element after inserting into DOM with jquery

I inserted a canvas element into the DOM of a new file with the following code:
$('#nav_steps').html(canvas);
I want to select this canvas to do something with it, but I can't. Can you help me? Thanks.
data.forEach(function(data) {
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = w_notepad;
canvas.height = h_notepad;
$(canvas).toggle(!data.isActive).appendTo('#canvas_panel');
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, w_notepad, h_notepad);
};
img.src = data.dataImageURL;
});
i want :
$("canvas:eq(0)");
Thank.