javascript - Javascript - 如何等待图像加载？无法让 img.load 工作？

Question

在我的 javascript 中，我绘制到画布上，之后我希望将画布转换为 png 并使用以下代码显示在 div 中：

var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
var imgObj = new Image();
imgObj.src = dataURL;
imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };

当我在绘制画布后直接调用它时，我会在“myImg”中得到一个完全空白的图像，但是如果我通过单击链接调用完全相同的代码，它将被正确绘制：

<a id="viewImgLnk" href="javascript:void()" onclick=" return convertCanvasToImage();">View Image</a>

<script>
    function convertCanvasToImage(){
        var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
        var imgObj = new Image();
        imgObj.src = dataURL;
        imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };
    }
</script>

如何在没有链接的情况下直接加载图像？

Answer 1

我在过敏的帮助下得到了代码！

setTimeout(function() {
    var dataURL = document.getElementById('myCanvas').toDataURL("image/png");
    var imgObj = new Image();
    imgObj.src = dataURL;
    imgObj.onload = function() {document.getElementById('myImg').appendChild(imgObj); };
}, 300);