画在画布上的视频帧仅部分可见和放大答案

【问题标题】：Video frames drawn onto canvas only partially visible and magnified画在画布上的视频帧仅部分可见和放大
【发布时间】：2015-08-24 20:20:07
【问题描述】：

我在将视频帧绘制到画布上时遇到问题。我在下面的代码 sn-p 中报告了我的问题。问题是视频帧被绘制到画布上，但只有部分视频帧可见，并且该部分似乎被放大了很多（即放大）。

我怀疑它与视频/画布元素的宽度/高度属性与这些相同元素的 css 宽度和高度属性之间的差异有关，但是无论我尝试什么，我都无法让它工作.我尝试完全不设置 css 宽度/高度或只设置 css 宽度/高度，但都产生相同的结果。

请注意，视频本身也是 640 x 480 像素。当我将视频元素附加到 dom 时，它显示得很好。

var video = $('<video />', {
    'width': '640px',
    'height': '480px',
    'muted': 'false',
    'src': 'videos/video1.mp4'
}).css({
    'width': '640px',
    'height': '480px'
});

video[0].load();


video[0].addEventListener("canplaythrough", function(){
    var canvas = $('<canvas />', {
        'width': '640px',
        'height': '480px'
    }).css({
        'width': '640px',
        'height': '480px'
    });

    canvas.appendTo( document.body );
    var canvasContext = canvas[0].getContext("2d");
    video[0].play();

    var interval = setInterval( function(){
        canvasContext.drawImage( video[0], 0, 0, 640, 480 );
    }, 20 );

    //video.appendTo( document.body );

}, false );

有什么建议吗？

【问题讨论】：

您似乎正在使用 css 设置画布大小 - 这还不够。默认情况下，画布的大小为 300x150 - 这是它包含的像素数。如果你想把它变大，你需要设置画布的宽度/高度属性 - 你不能just使用css。如果您只是使用 css 将其大小设置为 640x480，您将拥有一个 300x150 像素的画布，以 640x480 的大小显示 - 即它将是左上角的缩放/裁剪视图。这是一个真正的 640x480 画布 - <canvas width='640' height='480' id='whatever'></canvas>
我会在@enhzflep 的评论中添加您应该避免对这些值进行硬编码并使用video.videoWidth 和video.videoHeight 值
在我的示例中我不是同时设置了 CSS 和画布宽度吗？
啊，我的困惑是我认为我通过将宽度和高度属性作为参数传递给 jquery 来设置画布宽度。显然这些并没有设置画布的宽度和高度。相反，我必须这样做：context.canvas.width = 640; 和 context.canvas.height = 480;

标签： javascript html video canvas

【解决方案1】：

我的困惑是我认为我通过将宽度和高度属性作为参数传递给 jquery 来设置画布宽度，如下所示：

var canvas = $('<canvas />', {
    'width': '640px',
    'height': '480px'
});

但是，这似乎并没有在画布标签上设置宽度和高度属性，但似乎设置了 CSS 宽度和高度。为了得到正确的结果，我必须这样做：

var ctx = canvas[0].getContext("2d");
ctx.canvas.width = 640;
ctx.canvas.height= 480;

【讨论】：