Как избежать выполнения toDataURL перед window.onload

Question

canvas.toDataURL () возвращает пустое изображение. Потому что он выполняется до window.onload

window.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var video = document.getElementById('video');
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

var canvas = document.getElementById('myCanvas');
var photo = canvas.toDataURL('image/png');
console.log(photo);
$.ajax({
  method: 'POST',
  url: 'script.php',
  data: {
    photo: photo
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

отлично рисует изображение в Windows onload, только проблема в том, что dataurl возвращает пустое значение, потому что он выполняется первым. Как решить это

Answer 1

Я бы порекомендовал использовать video.oncanplay (событие canplay возникает, когда браузер может начать воспроизведение указанного аудио / видео (если оно достаточно буферизовано для начала) w3 link ) вместо window.onload

пожалуйста, найдите рабочий код ниже, надеюсь, это поможет:

    var video = document.getElementById("video");
video.oncanplay = function() {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  var canvas = document.getElementById("myCanvas");
  var photo = canvas.toDataURL("image/png");
  console.log(photo);
  $.ajax({
    method: "POST",
    url: "script.php",
    data: {
      photo: photo
    }
  });
};

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <canvas id="myCanvas" width="578" height="200"></canvas>
    <video id="video" src="https://dl.dropboxusercontent.com/s/yacmy685uenthji/mov_bbb.mp4" crossorigin="anonymous"></video>

Answer 2

ожидание завершения функции загрузки с помощью асинхронного режима. или вставив остальную часть вашего кода в функцию загрузки.

при асинхронной функции, например )

function loadlast() {    
      var canvas = document.getElementById('myCanvas');
      var photo = canvas.toDataURL('image/png');
      console.log(photo);
      $.ajax({
        method: 'POST',
        url: 'script.php',
        data: {
          photo: photo
        }
      });
      console.log("load last");

  }      

window.onload = async function() {  
    var canvas = document.getElementById('myCanvas');
    var video = document.getElementById('video');
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    console.log("load first")
    //setTimeout(alert("4 seconds"),4000);
    await loadlast();         
}

дополнительная справка для асинхронной функции https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function