Javascript HTML5画布drawImage剪辑大小不正确的图像_Javascript_Html_Html5 Canvas

Javascript HTML5画布drawImage剪辑大小不正确的图像

javascript html html5-canvas

Javascript HTML5画布drawImage剪辑大小不正确的图像,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我一直在尝试使用HTML5 canvas drawImage从视频中获取一张静止海报，但下面的javascript代码只捕获了部分帧，我似乎不知道为什么？代码如下： <html> <body> <video muted="" id="video" preload="auto" loop="" autoplay="auto" src="https://funpd.com/uploads/14094-when-your-crush-stares-at-you.mp4"

我一直在尝试使用HTML5 canvas drawImage从视频中获取一张静止海报，但下面的javascript代码只捕获了部分帧，我似乎不知道为什么？代码如下：

<html>
<body>
<video muted="" id="video" preload="auto" loop="" 
autoplay="auto" src="https://funpd.com/uploads/14094-when-your-crush-stares-at-you.mp4" type="video/mp4"></video>
<button onclick="capture();">Capture</button> <br/>
<canvas id="canvas"></canvas>
<script>
function capture(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}
</script>
</body>
</html>


捕获

函数捕获（）{
var canvas=document.getElementById（'canvas'）；
var video=document.getElementById（'video'）；
canvas.getContext（'2d'）.drawImage（video，0，0，video.videoWidth，video.videoHeight）；
}

您可以访问以供参考。我想捕获整个视频帧，上面的代码只捕获帧的一部分。

您必须事先相应地设置画布的

宽度和高度
i、 e
默认的canvas
大小为300x150像素（）。

您可以调整画布大小以适合视频（如另一个答案中所建议的），也可以使用的“long”变量，在该变量中，您可以指定目标矩形，从而调整视频大小以适合您的画布
为了保持纵横比正确，或者为了将图像定位在画布的中心位置，可以应用一些数学知识：

函数捕获（）{
var canvas=document.getElementById（'canvas'）；
var video=document.getElementById（'video'）；
var cw=画布宽度；
var ch=画布高度；
var vw=视频宽度；
var vh=视频高度；
if（cw/ch@h-b它正在工作。现在，我如何将此剪辑图像作为海报分配给视频？您可以将图像作为数据URL获取，并将其分配给img.src。请检查stackoverflow，这肯定是以前问过的，与此问题无关（另外，请不要试图改变这个问题，如果你没有找到解决办法，请问一个新问题）@priyaverma：另请参阅：
canvas.width = video.videoWidth;
...