从视频中将图像绘制到画布（无错误，但未绘制图像）

Question

我试图从动态创建的视频元素中将图像绘制到画布上。我查了几个堆栈溢出，有些解决方案是“添加preload =＆＃34; auto＆＃34;视频标签或将视频格式从mp4切换到ogg。然而，这些都不适合我：

这是我在index.ejs中的代码：

<video id='current_vid' width="640" height="480" controls preload="auto"> 
</video>
<canvas id='canvas' width="200px" height="150px" style="border:2px solid black"></canvas>

这是我的script.js中的代码：

let canvas,ctx;
window.onload = function(){
    $('#current_vid').attr('src','videos/sample.mp4'); //i have tried with ogg video as well
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext("2d");
    let video_a = thumbnail(document.getElementById("current_vid"));    
}

function thumbnail(video) {
  ctx.drawImage(video, canvas.width, canvas.height);
}

dom显示画布元素存在（因为我可以在我的开发工具中看到边框和它，但视频中的图像数据实际上并未放在画布中

如果您需要更多信息，请评论您需要的信息。谢谢。

Answer 1

从MDN，drawImage函数参数不是图像/画布的大小： 见

简而言之，dx和dy不是图像的大小，而是目标X和Y坐标。您正在画布之外绘制图像。您应该使用ctx.drawImage(video, 0, 0);