Stack Exchange
how to run a function after finish onload event?
resizeImage() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const maxW = 400;
  const maxH = 400;
  const image1 = new Image();
  image1.src = this.uploadedImage;
  const iw = image1.width;
  const ih = image1.height;
  const scale = Math.min((maxW / iw), (maxH / ih));
  const iwScaled = iw * scale;
  const ihScaled = ih * scale;
  canvas.width = iwScaled;
  canvas.height = ihScaled;
  if (image1.complete) {
    console.log('test');
    context.drawImage(image1, 10, 10, iwScaled, ihScaled);
    this.initialImage = canvas.toDataURL();
    document.getElementById('imgcanvas').src = canvas.toDataURL();
    this.cropImage(canvas.toDataURL());
  } else {
    image1.onload = function drawImage() {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      this.initialImage = canvas.toDataURL();
      document.getElementById('imgcanvas').src = canvas.toDataURL();
      this.cropImage(canvas.toDataURL);
    };
  }
},

how to call a function after finish onload event? because i get an error that state this.cropImage is not a function. is there anyone can help me to fix this error where i need to call the cropImage function after get the url?
!!!! updated : i saw that context.drawImage still not working

The root problem is yout img has not completed loading yet when .drawImage is called. You need to listen to @load event in your image component.

@YongQuan ya i got that and has fixed that but it's come an error where i can't call a function after onload event as i state after edit in above question?

The problem is related to the context of your call, your this inside your function call is not the this from the outside as you are expecting.
One simple way to fix that is to use arrow functions:
    image1.onload = _ => {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      setTimeout(_ => {
        this.initialImage = canvas.toDataURL();
        document.getElementById('imgcanvas').src = canvas.toDataURL();          
        this.cropImage(canvas.toDataURL);
      }, 100);
    };


yes this arrow function is fix the function error. but still after re check back the error also is caused by the canvas is not draw any image while i've console the image 1 in the onload function it's display the right data but when console the this.initialImage, they were empty data.

@KhairulHabib At that point the drawImage is pilled up to the DOM to be repainted, it will not be there right in the next line as you are expecting. The only trick I can think to bypass this easily is using a timeout that is not an elegant solution but might work.

i've tried by re run the resizeImage() function after onload is finish so that it'll run the image1.complete condition. i know it's quiet not elegant but that's only working function right now. but i still happy if there were someone could fix that in better way

Put the image1.src after the image1.onload:
resizeImage() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const maxW = 400;
  const maxH = 400;
  const image1 = new Image();

  const iw = image1.width;
  const ih = image1.height;
  const scale = Math.min((maxW / iw), (maxH / ih));
  const iwScaled = iw * scale;
  const ihScaled = ih * scale;
  canvas.width = iwScaled;
  canvas.height = ihScaled;
  if (image1.complete) {
    console.log('test');
    context.drawImage(image1, 10, 10, iwScaled, ihScaled);
    this.initialImage = canvas.toDataURL();
    document.getElementById('imgcanvas').src = canvas.toDataURL();
    this.cropImage(canvas.toDataURL());
  } else {
    image1.onload = function drawImage() {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      this.initialImage = canvas.toDataURL();
      document.getElementById('imgcanvas').src = canvas.toDataURL();
      this.cropImage(canvas.toDataURL);
    };
  }

  image1.src = this.uploadedImage;

}


sorry but it's not working, the context.drawImage still not working and not drawing anything
