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

Question

Норманн

javascript

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

Как можно дождаться завершения события `onload` для переменной `img`, перед тем как вернуть значение `canvas.dataURL()` из функции, в которой изображение отрисовывается на `canvas`, а затем на нем рисуются другие элементы? Вот пример кода:

12 марта 2024 г. 18:29

Ответы на вопрос 2

Похожие вопросы

Answer 1

```javascript
function drawImageOnCanvas() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        
        // Некоторая дополнительная отрисовка на canvas
        
        // Теперь нужно получить dataURL после завершения отрисовки изображения на canvas
        var dataURL = canvas.toDataURL(); // Возвращает dataURL картинки
        
        console.log(dataURL); // Выводим dataURL в консоль
        return dataURL;
    };
    
    img.src = 'путь_к_изображению.jpg';
}

var imageDataURL = drawImageOnCanvas();
console.log(imageDataURL); // undefined, так как функция drawImageOnCanvas() не возвращает значение
```

Чтобы получить значение `dataURL` после завершения события `onload`, необходимо использовать колбэк-функцию. В приведенном коде функция `drawImageOnCanvas()` не возвращает значение, поэтому вместо этого можно передать колбэк-функцию и вызвать ее после завершения отрисовки изображения на canvas. Вот модифицированный пример кода:

```javascript
function drawImageOnCanvas(callback) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        
        // Некоторая дополнительная отрисовка на canvas
        
        // Теперь нужно получить dataURL после завершения отрисовки изображения на canvas
        var dataURL = canvas.toDataURL(); // Возвращает dataURL картинки
        
        console.log(dataURL); // Выводим dataURL в консоль
        callback(dataURL); // Вызываем колбэк-функцию и передаем ей значение dataURL
    };
    
    img.src = 'путь_к_изображению.jpg';
}

drawImageOnCanvas(function(imageDataURL) {
    console.log(imageDataURL); // Выводим dataURL в консоль
});
```

Теперь функция `drawImageOnCanvas()` принимает колбэк-функцию `callback`, которая будет вызвана после завершения события `onload`, передавая ей значение `dataURL`. Внутри колбэк-функции можно обрабатывать и использовать полученное значение `dataURL` как угодно.

Answer 2

Этот код НЕ  руководство к действию. В общем смысле, странно заставлять такую задачу работать синхронно. Но это прямой ответ на заданный вопрос. 
 Вот пример. Сделал небольшие изменения, чтобы избавиться от ошибок. 
 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()