将视频元素渲染到画布 - 不需要的拉伸？

Question

我正在尝试生成视频的屏幕截图。目标是生成与视频第一帧相同的图像。但是，我遇到了结果图像被拉伸的问题。

此图像在左侧显示视频，在一开始就暂停 - 以及在右侧生成的图像：

注意到底部的灰色区域了吗？它已被拉伸到比视频更高的高度。

我正在使用以下代码生成屏幕截图：

示例标记：

<video id="video" height="300" width="320" preload="auto">
    <source src="http://domain.com/video.mp4">
</video>
<canvas id="canvas" height="300" width="320"></canvas>

脚本：

// Grab an existing video element, 300px tall, 320px wide.
var video = document.getElementById('video');
// Grab existing canvas, 300px tall, 320px wide.
var canvas = document.getElementById('canvas');
// Wait until video has loaded
video.addEventListener('loadeddata', function() {
    var context = canvas.getContext('2d');
    // Render using same dimensions.
    context.drawImage(video, 0, 0, 320, 300);
}, false);

有人可以告诉我如何避免这种拉伸吗？

Answer 1

就像<img> 元素，<video> 元素的width 和height 属性调整容器大小。另一方面，drawImagemethod 使用该内容。

然后您必须使用videoElement.videoWidth 和videoElement.videoHeight 属性来检索媒体的宽度和高度（或img.naturalWidth 和img.naturalHeight 用于图像元素）。

所以你有两种可能性：

您想以真实大小拍摄视频：

var ctx = canvas.getContext('2d');
btn.onclick = function(){
  // set your canvas width and height to the media's ones
  canvas.width = vid.videoWidth;
  canvas.height = vid.videoHeight;
  ctx.drawImage(vid, 0,0);
  };

<video src="http://vjs.zencdn.net/v/oceans.mp4" width="200" height="100" autoplay controls muted loop id="vid"></video><button id="btn">take a screenshot</button>
<canvas id="canvas"></canvas>

或者如果你想截取你的视频元素，你会面临更多 复杂性，因为您必须伪造默认的object-fit: contain; CSS 属性。这要归功于ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 属性。

你可以找到一种方法here，还有一种更完整的方法here，所以我不会在这个答案中包含它，只要记住使用video.videoWidth和video.videoHeight属性作为sourceWidth和sourceHeight。