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?

+5


source to share


1 answer


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.

0


source







All Articles