javascript - 从视频将图像绘制到 Canvas (没有错误，但未绘制图像)

Question

我正在尝试从动态创建的视频元素将图像绘制到 Canvas 上。我查找了几个堆栈溢出问题，一些解决方案是“将 preload =“auto”添加到视频标签或将视频格式从 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 显示 Canvas 元素存在(正如我可以看到边框，它位于我的开发工具中，但视频中的图像数据实际上并未放置在 Canvas 内

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

Answer 1

来自 MDN，drawImage函数参数不是图像/ Canvas 的大小:请参阅void ctx.drawImage(image, dx, dy);

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