爲什麼ctx.drawImage只將部分視頻元素畫到畫布上？

我試圖使用ctx.DrawImage畫一個電影框架到畫布元素，我得到了我認爲非常奇怪的縮放/裁剪行爲。爲什麼ctx.drawImage只將部分視頻元素畫到畫布上？

首先，這裏是我的代碼：

HTML

<body> 
    <video autoplay width="125" height="125"></video> 
    <img src=""> 
    <canvas></canvas> 
</body>

的Javascript：

var video = document.querySelector('video'); 
    var canvas = document.querySelector('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var localMediaStream = null; 

    function snapshot() { 
     if (localMediaStream) { 
      ctx.drawImage(video, 0, 0, 125, 125); 
      document.querySelector('img').src = canvas.toDataURL('image/webp'); 
     } 
    } 

video.addEventListener('click', snapshot, false); 

navigator.getUserMedia(

    { 
     video: true 

    }, function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     localMediaStream = stream; 
});

這裏做的事情基本上是從錄像拍攝靜態和壓碎它因此它大約是原始寬度的1/3和大約70％的高度。這令人沮喪。

除去125並僅使用ctx.drawImage(video, 0, 0)填充畫布與靜止，但它只是左上角（25％）的圖像。這也令人沮喪。

如何讓畫布繪製與視頻元素播放完全相同的圖像？

這加上視頻元素本身確實是125px x 125px，但由於寬高比，視頻元素周圍有字母框（空白）。有沒有辦法強制視頻元素填充傳入的視頻流？

來源

2014-12-11 Startec

嘗試設置你的畫布'height' /'width'到'video.videoHeight' /'video.videoWidth'？ – Kaiido 2014-12-11 01:24:06

我在使用網絡攝像頭（使用navigator.getUserMedia功能）。網絡攝像頭的分辨率要高得多，因此，即使視頻元素和畫布的大小相同，所拍攝的圖像也比適合的大得多。

解決的辦法是增加一個constrain屬性，以使媒體流也125px x 125px

來源

2014-12-11 01:55:05 Startec

請注意，約束僅適用於Chrome現在 – Kaiido 2014-12-11 08:47:25

嗨！你如何添加這些限制？謝謝。 – OyoKooN 2014-12-11 15:16:46

http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-constraints – Kaiido 2014-12-11 16:40:24

我也正面臨着同樣的問題，當我試圖...

var sw = video.offsetWidth, // source width 
    sh = video.offsetHeight, // source height 
    dw = canvas.width, // destination width 
    dh = canvas.height; // destination height 
ctx.drawImage(video, 0, 0, sw, sh, 0, 0, dw, dh);

當我改變它得到有效解決：

ctx.drawImage(video, 0, 0, dw, dh);

我相信你的情況的問題是，125是身高和視頻元素的寬度，但你應該什麼是一個供應的畫布高度和寬度，例如，設置畫布寬度和高度：

canvas.width = 125; 
canvas.height = 125; 
ctx.drawImage(video, 0, 0, 125, 125);

來源

2015-01-05 03:45:24 mido

爲什麼ctx.drawImage只將部分視頻元素畫到畫布上？

回答

相關問題