HTML 5视频到Canvas缩放问题

Question

我正在尝试捕获html5视频的一个帧以创建它的缩略图但是当图像渲染到画布时我看到了一些奇怪的结果。

我所看到的是，画布中显示的图像只是放大了一小部分视频！如下图所示：

代码也非常简单：

$(document).ready(function(){
    var $Body = $("body");

    var $Video = $("<video>").appendTo($Body);
    var cVideo = $Video.get(0);

    cVideo.addEventListener("loadedmetadata", function(){
        cVideo.addEventListener("seeked", function(){
            var $Canvas = $("<canvas>").width(cVideo.videoWidth).height(cVideo.videoHeight);
            $Canvas.appendTo($Body);
            var cCtx = $Canvas.get(0).getContext("2d");
            cCtx.drawImage(cVideo, 0, 0);
        }, false);
        cVideo.currentTime = 500;
    }, false);
    cVideo.src = "movie.mkv";
});

我尝试了许多宽度/高度/剪裁区域等组合，但所有我能够实现的只是查看原始视频右上角的不同版本。

编辑：我将宣称原始视频尺寸为1920 x 800，并且在提供的图片中，视频和画布标签的大小都是如此。我也尝试过不同大小的结果，但结果仍然相同

编辑2：我尝试了多种格式/视频和操作系统，但仍然遇到同样的问题，所以我不认为问题与任何编解码器问题相关，例如

Answer 1

好吧我不知道为什么这会对canvas元素产生任何影响但为了实现这一点我必须使用它的width / height属性设置画布的宽度和高度然后我可以改变画布的大小我喜欢，视频将填满画布区域。完整解决方案如下：

$(document).ready(function(){
var $Body = $("body");

var $Video = $("<video>").appendTo($Body);
var cVideo = $Video.get(0);

cVideo.addEventListener("loadedmetadata", function(){
    cVideo.addEventListener("seeked", function(){
        var $Canvas = $("<canvas>").attr("width", cVideo.videoWidth).attr("height", cVideo.videoHeight);
        $Canvas.appendTo($Body);
        var cCtx = $Canvas.get(0).getContext("2d");
        cCtx.drawImage(cVideo, 0, 0, cVideo.videoWidth, cVideo.videoHeight);
    }, false);
    cVideo.currentTime = 500;
}, false);
cVideo.src = "movie.mkv";

}）;