Как дождаться выполнения события onload чтобы вернуть значение из функции?

Question

[Sergo Zar]

У меня есть функция в которой на canvasотрисовывается изображение, а потом на нем рисуются еще некоторые элементы. И после этого нужно вернуть значение canvas.dataURL(). Но после присвоения пути к изображению функция сразу возвращает значение не дожидаясь когда закончится выполнение события onload для переменной img.

Можно ли как-то дождаться выполнения события, а потом уже вернуть значение?

Вот пример кода:

Comments

[WbICHA]

Можно через промис, к примеру.

Answer 1

[MagicMight]

Этот код НЕ руководство к действию. В общем смысле, странно заставлять такую задачу работать синхронно. Но это прямой ответ на заданный вопрос.
Вот пример. Сделал небольшие изменения, чтобы избавиться от ошибок.

async function main()
{
  let canvas = document.querySelector("#canvas");
  canvas.width = 200;
  canvas.height = 200;

  let ctx = canvas.getContext('2d');

  function fun(){
    return new Promise((resolve, reject) => {
      let dataUrl = "no";

      let img = new Image()
      img.onload = () => {
          ctx.drawImage(img, 0, 0, img.width, img.height);
          dataUrl = canvas.toDataURL();

          resolve(dataUrl)
      }

      img.onerror = reject
      img.src = "/img/fallback/logo-adunit.jpg";
    })
  }

  let dataUrl = await fun();

  document.querySelector("#print").innerText = dataUrl;
}

main()

Comments

[Sergo Zar]

Спасибо