处理Javascript后获取canvas toDataUrl()

Question

我有一个 Javascript 函数，可以创建一个画布，在上面写一个图像和一个文本。在 and 我需要 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。结果，您的画布指令都没有运行。因为图片是异步加载的，所以无法同步获取结果画布，必须使用回调或promise。

试试这个。

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