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

【问题标题】：HTML5 canvas drawImage clips incorrect size imageHTML5 画布 drawImage 剪辑不正确大小的图像
【发布时间】：2018-03-24 11:42:15
【问题描述】：

我一直在尝试使用 HTML5 画布 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>

您可以访问https://funpd.com/test 以供参考。我想捕获整个视频帧，上面的代码只捕获了部分帧。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

默认canvas 大小为 300x150 像素 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)。
您可以调整画布大小以适应视频（如另一个答案中所建议），或者您可以使用drawImage 的“长”变体，您也可以在其中指定目标矩形，从而调整视频大小以适合您的画布.

为了保持正确的纵横比，或者将图像定位在画布的中心，可以应用一些数学运算：

function capture(){
  var canvas = document.getElementById('canvas');
  var video = document.getElementById('video');
  var cw=canvas.width;
  var ch=canvas.height;
  var vw=video.videoWidth;
  var vh=video.videoHeight;
  if(cw/ch<vw/vh){
    var th=cw*vh/vw;
    canvas.getContext('2d').drawImage(video, 0, 0, vw, vh, 0, (ch-th)/2, cw, th);
  }else{
    var tw=ch*vw/vh;
    canvas.getContext('2d').drawImage(video, 0, 0, vw, vh, (cw-tw)/2, 0, tw, ch);
  }
}

<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>

【讨论】：

【解决方案2】：

您必须事先相应地设置画布的width 和height。

即

canvas.width = video.videoWidth;
...

【讨论】：

@h-b 它正在工作。现在，如何将此剪裁的图像作为海报分配给视频？
您可以获取图像作为数据 URL 并将其分配给 img.src。请检查stackoverflow，它肯定已经被问过，它与这个问题无关（也请不要现在尝试更改问题，如果有的话，如果你没有找到解决方案，请询问新问题）
@priyaverma：另见：developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…