HTML5 Canvas Base64 错误

Question

知道为什么这段代码不起作用吗？ :\

演示 -> https://jsfiddle.net/vgmFN/89/

 <script>
        var imgObj1 = new Image();
        var img = new Image();var a1=0;
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');
        imgObj1.onload = function() {
        ctx.drawImage(imgObj1,1,1);a1 = 1;
        }
        imgObj1.src = 'favicon.ico';
        if (a1 == 1) {
        console.log(can.toDataURL())
        img.src = can.toDataURL();
        document.body.appendChild(img);
        a1=0;
        }
        </script>

Answer 1

您给 imgObj1 时间加载 imgObj1.onload，但您还必须通过添加 img.onload

给 img 时间加载

https://jsfiddle.net/m1erickson/tf0y1pL9/

顺便说一句，如果您格式化代码，则更容易发现错误。 ;-)

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// create and load the first image
var imgObj1 = new Image();
imgObj1.onload = function() {

    ctx.drawImage(imgObj1,1,1);

    // create and load the canvas as an image
    var img = new Image();
    img.onload=function(){
        document.body.appendChild(img);
    }
    img.src = can.toDataURL();

}
imgObj1.src = '/favicon.ico';