Как запустить функцию после события oni Fini sh? - PullRequest
Новая
       3

Как запустить функцию после события oni Fini sh?

1 голос
/ 09 января 2020 
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);
    };
  }
},

как вызвать функцию после события загрузки Fini sh? потому что я получаю ошибку, которая заявляет, что this.cropImage не является функцией. Кто-нибудь может помочь мне исправить эту ошибку, когда мне нужно вызвать функцию cropImage после получения URL-адреса?

!!!! обновлено: я увидел, что context.drawImage все еще не работает

Ответы [ 3 ]

1 голос
/ 09 января 2020

Проблема связана с контекстом вашего вызова, ваш this внутри вашего вызова функции - это не this извне, как вы ожидаете.

Один простой способ исправить это используйте функции стрелок: 

    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);
    };
0 голосов
/ 09 января 2020

Я попытался повторно запустить функцию resizeImage () после окончания загрузки oni sh, чтобы она выполняла условие image1.complete. я знаю, что это тихо, не элегантно, но сейчас это только рабочая функция. но я все еще счастлив, если бы кто-то мог исправить это лучше

0 голосов
/ 09 января 2020

Поместите image1.sr c после 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;

}
...