HTML5获取在画布中创建的图片的base64代码

时间:2018-12-04 05:09:09

标签: html5 canvas html5-canvas html2canvas

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();

一切正常,但是我无法获取base64代码。我在控制台“ƒtoDataURL(){[native code]}”中得到此信息。如何获取画布的base64。

我想在另一个画布上显示该base64图像。我该怎么办?

0 个答案:

没有答案