Question

我有一个Javascript函数，可以创建画布，在其上写入图像和文本。在和我需要base64 dataUrl，但我得到的只是一个空白画布。

这是我的功能：

 function createBreadCrumb(label) {

    var canvas = document.createElement('canvas');
        canvas.width = 25;
        canvas.height = 30;

        var img = new Image;
        img.src = 'map-pin-breadcrumb.png';


        var ctx=canvas.getContext("2d");

        img.onload = function(){

            ctx.drawImage(img, 0, 0);
            ctx.font = "11px Arial";
            ctx.textAlign="center"; 
            ctx.fillText(label, 12, 16);


        };


       return canvas.toDataURL();

}

Answer 1

在加载图片之前，您正在调用toDataURL。因此，您的画布说明都没有运行。因为图像是异步加载的，所以无法同步获取生成的画布，必须使用回调或承诺。

试试这个。

function createBreadCrumb(label, callback) {

    var canvas = document.createElement('canvas');
        canvas.width = 25;
        canvas.height = 30;

        var img = new Image;
        var ctx = canvas.getContext("2d");

        img.onload = function(){

            ctx.drawImage(img, 0, 0);
            ctx.font = "11px Arial";
            ctx.textAlign="center"; 
            ctx.fillText(label, 12, 16);

            callback(canvas.toDataURL());
        };

        img.src = 'map-pin-breadcrumb.png';
}

createBreadCrumb("hello", function(crumb){
  // do your stuff
});

处理Javascript后获取canvas toDataUrl（）

1 个答案: