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

Question

在用户使用文件选择器之后，HTML和代码将图像绘制到画布中。

HTML

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

我尝试将.onload()方法附加到各种元素，并将代码放在各个地方，没有任何运气。如何通过<canvas>事件完成使用drawImage元素运行的代码？