HTML5 get base64 code of image created in canvas

Question

var ctx;

function roundedImage() {
    var img = new Image();
    img.onload = function() {

        ctx.beginPath();
        ctx.arc(160, 150, 75, 0, Math.PI * 2, true); //draw the circle
            ctx.lineWidth = 5;
        ctx.strokeStyle = 'white';
            ctx.stroke();
            ctx.clip();
        ctx.closePath();
        ctx.drawImage(img, 80, 70, 160, 160);

    };
    img.src = "xxxxx";
    img.crossOrigin = "Anonymous";
}

function fillText(name) {
    ctx.fillStyle = 'white';
    ctx.font = '40pt Calibri';
    ctx.fillText(name, 100, 100);
}

function backImg() {

    var background = new Image();
    background.src = "xxxxx";
    background.onload = function(){
        ctx.drawImage(background, 3, 3, canvas.width - 7, canvas.height - 7);
        roundedImage()
    }

}


function createCanvas(width, height) {
    var canvas = document.createElement("canvas");
    canvas.id = "canvas";
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
}

function admire() {
    createCanvas(400,625)
    backImg()
    var original64 = canvas.toDataURL
    console.log(original64);
}

window.onload = admire();

Everything is working fine but I am unable to get the base64 code. I am getting this in console "ƒ toDataURL() { [native code] }" How can I get base64 of canvas created.

And I want to show that base64 image in another canvas. How can I do that?

`canvas.toDataURL` is a function, you need to call it by appending `()` after it. But note that backImg is asynchronous and that by the time you'll call toDataURL it won't have drawn anything yet. Also, `window.onload` expects a function, here you are setting it to the result of calling `admire()` (which is `undefined`), so you won't wait until the page's has loaded before you call *admire*. — Kaiido, Dec 04 '18 at 05:30

HTML5 get base64 code of image created in canvas

0 Answers0