Как сделать асинхронный метод объекта в классе, который проверяет загрузку картинки и только потом срабатвает функция drawImage?

Question

[Павел Орловский]

Здравствуйте. Пишу класс анимации спрайт листа. Как можно засунуть в класс проверку на загрузку картинки, что бы она отрисовывалась. я придумал только так.

let canvas = document.getElementById("canvas");

let arab = new Image();
arab.src = "./img/arab-sprite.png";

arab.onload = function () {
class Character {
  constructor(options) {
    this.ctx = options.ctx;

    this.image = options.image;
    this.width = options.width;
    this.height = options.height;
    
    this.render();
  }
  
  load(){}

  render() {
    this.ctx.drawImage(
      this.image,
      0,
      0,
      this.width / 7,
      this.height,
      0,
      0,
      this.width / 7,
      this.height
    );
  }
}

const arabCharacter = new Character({
  ctx: canvas.getContext("2d"),
  image: arab,
  width: 448,
  height: 60,
});
}

Но это выглядит плохо, пришлось по загрузки картинки обернуть весь код в анонимную функцию.
Подскажите как добавить функцию в класс которая сама будет проверять загрузку картинки/картинок асинхронно и только потом происходит отрисовка drawImage в методе render() и все будет инкапсулировано под капотом. Спасибо.

Answer 1

[RAX7]

Сделай вспомогательную функцию для загрузки картинок, которая будет возвращать промис. Код с созданием персонажа оберни в асинхронную функцию и дождись в ней загрузки картинки.

const canvas = document.getElementById('canvas');

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = src;

    if (image.complete) {
      resolve(image);
      return;
    }

    image.onload = () => resolve(image);
    image.onerror = (e) => reject(e);
  });
}

class Character {
  constructor(options) {
    this.ctx = options.ctx;

    this.image = options.image;
    this.width = options.width;
    this.height = options.height;

    this.render();
  }

  load() {}

  render() {
    this.ctx.drawImage(this.image, 0, 0, this.width / 7, this.height, 0, 0, this.width / 7, this.height);
  }
}

(async function main() {
  const spriteImage = await loadImage('./img/sprite.png');

  const character = new Character({
    ctx: canvas.getContext('2d'),
    image: spriteImage,
    width: 448,
    height: 60,
  });
})();