在畫布上繪製的視頻幀僅部分可見和放大

我在將畫面上的視頻幀繪製時出現問題。我已經在下面的代碼片段中說明了我的問題。問題在於視頻幀被繪製到畫布上，但只有部分視頻幀可見，並且該部分似乎被放大了許多（即放大）。在畫布上繪製的視頻幀僅部分可見和放大

我懷疑它與視頻/畫布元素的寬度/高度屬性和這些相同元素的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

在畫布上繪製的視頻幀僅部分可見和放大

回答

相關問題