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事件（当浏览器可以开始播放指定的音频/视频（缓冲到足以开始播放的时候）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

使用onsync等待onload函数完成加载。或将其他代码插入onload函数中。

在异步功能上，例如）

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的更多参考

如何避免toDataURL在window.onload

2 个答案: