canvas.toDataURL() not working properly [duplicate]

Question

I am having a canvas in which I upload 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 the canvas.toDataURL() to load the image to another canvas. The code is:

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 put to this a working url all fine. But the produced url from any picture I have tried comes out as

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.

If you try to use that it would not produce the photo of a plane that was in the canvas. How can I use the function toDataURL to draw the image on another canvas?

Wanitawanneeickel

if you try to use that it would not produce the photo of a plane that was in the canvas – Wanitawanneeickel

I have edit-ed your question to explain what doesn't work exactly mean. You might take the tour and visit the help center while you wait for the answers. – Exhibition

I see a few things in your code that's... off. Remove quotes around canvas name variable here: var myCanvas = document.getElementById('name_of_canvas');, use myCanvas instead of canvas here: var ctx2 = canvas.getContext('2d'); – Kisangani

Thank you fixed, though that was not the problem, it was working before my fault while copy paste, the problem is that it does not give me the right value of dataurl for any picture. In your system can you make this work? – Wanitawanneeickel

Do you sure that ctx2.drawImage(img3,0,0); called? – Exchange

Depending on how you are loading the images the canvas might be tainted - developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image - and so you cannot get the data URL and instead will get an error. If you just want to draw one canvas in to the other you can pass in the canvas to the drawImage method (ctx2.drawImage(canvas,0,0);) – Kief

You need to call toDataURL after you drawn your image on the canvas. Otherwise, of course your canvas is empty... – Laflamme

Answer 1

You can look at example of using HTMLCanvasElement.toDataURL() at developer.mozilla.org

toDataURL returns valid base64 encoded image. So the problem is how you assign this image for second canvas.

Exchange

No. I have passed a valid base 64 to the other canvas. The problem is with the dataURL, in my opinion at least. Though, if you can use the above code to upload an image on the first canvas and get a valid 64 i will be happy to accept the answer:) – Wanitawanneeickel