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

我在将画面上的视频帧绘制时出现问题。我已经在下面的代码片段中说明了我的问题。问题在于视频帧被绘制到画布上，但只有部分视频帧可见，并且该部分似乎被放大了许多（即放大）。在画布上绘制的视频帧仅部分可见和放大

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

请注意，视频本身也是640pxx480px。当我将视频元素附加到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);

有什么建议吗？

来源

2015-08-23 Stefan

看来你正在使用CSS设置画布大小 - 这是不够的。默认情况下，画布的尺寸为300x150 - 这是它包含的像素数量。如果你想使它更大，你需要设置画布的宽度/高度_attributes_ - 你不能_使用css。如果您只是使用css将其大小设置为640x480，则您将拥有一个尺寸为640x480的具有300x150像素的画布，即它将成为左上角的放大/裁剪视图。这是一个真正的640x480画布 - ''canvas width ='640'height ='480'id ='whatever'>' – enhzflep

我会添加到@ enhzflep的评论，你应该避免硬编码这些值，并使用'video.videoWidth '和'video.videoHeight'值 – Kaiido

我不是在我的例子中设置CSS和画布宽度吗？ – Stefan

我的困惑是，我还以为我被路过的宽度设置画布宽度和高度的参数属性的jQuery这样的：

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

然而，appearently这不设置宽度和高度属性在canvas标签上，但似乎设置了css的宽度和高度。为了得到正确的结果，我不得不这样做：

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

来源

2015-08-24 09:52:31 Stefan

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

回答

相关问题