javascript - HTML 5 视频到 Canvas 缩放问题

Question

我正在 try catch html5 视频的帧以创建它的缩略图，但是当图像被渲染到 Canvas 时我看到了一些奇怪的结果。

我看到的是 Canvas 中显示的图像只是视频的一部分放大了很多!如下图所示:

而且代码也非常简单:

$(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，在提供的图像中视频和 Canvas 标签的大小。我也尝试过不同尺寸的它们，结果仍然相同

Edit2:我已经尝试了多种格式/视频和操作系统，但仍然有同样的问题，所以我不认为该问题与任何编解码器问题有关

Answer 1

好吧，我不知道为什么这会对 canvas 元素产生任何影响，但为了让它工作，我必须使用它的宽度/高度属性设置 Canvas 的宽度和高度，然后我可以更改 Canvas 的大小随心所欲，视频将填满 Canvas 区域。完整解决方案如下:

$(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";

});