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

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

此图像在左侧显示视频，刚开始时暂停，在右侧显示生成的图像：

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

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

标记示例：

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

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

就像

截图一样

就像为

拍摄屏幕截图一样

canvas.style.width和

canvas.style.height

属性只是页面显示属性，与画布像素分辨率无关。您需要将

canvas.width

和

canvas.height

设置为正确的分辨率。我直接在元素上设置宽度和高度。我已将用于创建示例屏幕截图的标记添加到问题示例代码中。不，您必须将其设置为媒体的宽度和高度，视频元素的大小属性也仅显示大小。您可以通过js使用

video.videoWidth

和

video.videoHeight

检索它。

canvas.style.width

和

canvas.style.height

属性只是页面显示属性，与画布像素分辨率无关。您需要将

canvas.width

和

canvas.height

设置为正确的分辨率。我直接在元素上设置宽度和高度。我已将用于创建示例屏幕截图的标记添加到问题示例代码中。不，您必须将其设置为媒体的宽度和高度，视频元素的大小属性也仅显示大小。你可以通过js通过

video.videoWidth

和

video.videoHeight

检索它。你是否认为视频的自然大小与我设置的大小不同？我没有调整视频大小-mp4文件上的帧宽是320px，帧高是300px。在你的例子中，我只是想用视频的自然大小截图。然而，结果截图的内容似乎被拉伸了。@Tyler嗯，是的，考虑到你的解释，这就是我的想法。这是我能想到的唯一可能性。你能检查一下你这边的

video.videoHeight==300吗？是的，
video.videoHeight
显示为300。我做了一个基本版本的摆弄，你可以看到我正在使用的视频：好的，我可以，但只能在chrome上。。。和。你可能会在那里引起一个bug，bugzilla…，我会设法找更多的时间来调查它。但现在，我将给出一个一般性的答案，因为您似乎处于一个非常特殊的情况下。您使用的是Windows吗？今天早上我刚刚再次测试了小提琴，我的电脑上出现了错误，但我的Mac电脑上没有。使用的是完全相同的Chrome版本。你是否认为视频的自然大小与我设置的大小不一样？我没有调整视频大小-mp4文件上的帧宽是320px，帧高是300px。在你的例子中，我只是想用视频的自然大小截图。然而，结果截图的内容似乎被拉伸了。@Tyler嗯，是的，考虑到你的解释，这就是我的想法。这是我能想到的唯一可能性。你能检查一下你这边的
video.videoHeight==300吗？是的，
video.videoHeight
显示为300。我做了一个基本版本的摆弄，你可以看到我正在使用的视频：好的，我可以，但只能在chrome上。。。和。你可能会在那里引起一个bug，bugzilla…，我会设法找更多的时间来调查它。但现在，我将给出一个一般性的答案，因为您似乎处于一个非常特殊的情况下。您使用的是Windows吗？今天早上我刚刚再次测试了小提琴，这个错误出现在我的电脑上，而不是我的Mac电脑上——使用的是完全相同的Chrome版本。
// 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);