检测画布何时完成绘制-onload-onchange-Javascript

下面是在用户使用文件选择器后将图像绘制到画布中的HTML和代码

HTML 剧本

---

我尝试将.onload方法附加到各个元素，并将代码放在各个位置，但没有任何运气。如何使用drawImage事件获取要运行的元素代码？

为什么不在drawImage调用之后添加所需的代码？除非我遗漏了什么，否则我已经试过了，有些代码会顺序错误。drawImage方法将数据绘制到画布需要一些时间。与此同时，javascript似乎继续到下一行，异步运行一些代码。这可能会导致代码在drawImage完成之前实际运行。@Jnatazia是正确的。如果您有任何依赖于drawImage完成的代码，请将该代码放在onload函数中drawImage之后。你提到的行为是标准行为。加载图像时，浏览器将立即在.src之后执行代码，并仅在图像完全加载后执行.onload代码。您的权利。很抱歉。非常感谢。

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<button onclick='fncSaveAsJPG()'>Convert Img To JPEG</button>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>
<img id='imgTwoForJPG' src="">

<script>

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

    var cnvs=document.getElementById("cnvsForFormat");
    console.log("cnvs: " + cnvs);
    var ctx=cnvs.getContext("2d");
    cnvs.style.border="1px solid #c3c3c3";

    var img = new Image;

    img.src = URL.createObjectURL(frmData);

    console.log('img: ' + img);

    img.onload = function() {
      var picWidth = this.width;
      var picHeight = this.height;
      var wdthHghtRatio = picHeight/picWidth;
      console.log('picWidth: ' + Number(picWidth));
      console.log('picHeight: ' + Number(picHeight));
      console.log('wdthHghtRatio: ' + wdthHghtRatio);

      if (Number(picWidth) > 400) {
        var newHeight = Math.round(Number(400) * wdthHghtRatio);
      } else {
        return false;
      };

        document.getElementById('cnvsForFormat').height = newHeight;
        console.log('width: ' + picWidth + " h: " + picHeight);
        console.log('width: 400  h: ' + newHeight);
        //You must change the width and height settings in order to decrease the image size, but
        //it needs to be proportional to the original dimensions.
        ctx.drawImage(img,0,0, 400, newHeight);
    };

    cnvs.onload = function () {
        console.log('Onload Canvas 2 Ran');
    };
 };

cnvsForFormat.onload = function () {
    console.log('Onload Canvas Ran');
};

</script>