Canvas.toDataURL () not working as expected
I have a canvas in which I load an image with the following code:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Now I wanted to use canvas.toDataURL()
to load the image to another canvas. Code:
var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);
function drawDataURIOnCanvas(dataURL, name_of_canvas) {
var myCanvas = document.getElementById(name_of_canvas);
var img3 = new Image;
var ctx2 = myCanvas .getContext('2d');
img3.onload = function(){
ctx2.drawImage(img3,0,0); // Or at whatever offset you like
};
img3.src = dataURL;
}
If I attach a working url to this, everything will be fine. But the resulting url from any picture I tried is given as
data: images / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68 / 0AAAAASUVORK5CYII =.
If you try to use this, it will not produce a photograph of the plane that was on the canvas. How do I use a function toDataURL
to draw an image on a different canvas?
source to share
You can see an example of using HTMLCanvasElement.toDataURL () at developer.mozilla.org
toDataURL
returns a valid base64 encoded image. So the problem is how you assign this image to the second canvas.
source to share