javascript - キャンバス上に画像がある場合、Canvas.doDataUrl が機能しない

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

        }

独自の URL を入力することもできます

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