Question

我在将视频帧绘制到画布上时遇到问题。我在下面的代码片段中重新定义了我的问题。问题是视频帧被绘制到画布上，但只有部分视频帧可见，而且该部分似乎被放大了很多（即放大）。

我怀疑它与视频/画布元素的宽度/高度属性之间的差异以及这些相同元素的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 );

有什么建议吗？

绘制到画布上的视频帧仅部分可见并放大

0 个答案: