Canvas.toDataUrl在画布上的图像时不起作用

Question

我知道它只适用于本地图像。任何人都可以发布这样做的工作代码吗？

我已经尝试了以下内容 -

        var base_image = new Image();
        base_image.src = ("/img.png");

        base_image.onload = function(){
            var context = canvas.getContext('2d');
            context.drawImage(base_image, 0, 0);

        }

甚至输入我自己的网址

base_image.src = ("www.mywebsite.com/img.png");

随后 -

    var str = canvas.toDataURL("image/png");
    $("#myimg").attr("src", str);

都没有工作。

我该如何做到这一点？

Answer 1

将base_image.src 放在 base_image.onload之后：

    var base_image = new Image();
    base_image.onload = function(){
        var context = canvas.getContext('2d');
        context.drawImage(base_image, 0, 0);
        var str = canvas.toDataURL("image/png");
        $("#myimg").attr("src", str);
    }
    base_image.src = ("/img.png");