Javascript攝像頭快照拉得太大

我想通過javascript拍攝某人攝像頭的快照。代碼工作除了生成的圖像拉伸的方式太多，我可讀。Javascript攝像頭快照拉得太大

我搞砸與周圍的：ctx.drawImage（視頻，0，0）;行

我試過ctx.drawImage（視頻，0，0,1280,720）;沒有區別

我試過ctx.drawImage（video，0，0,100,100）;主要區別在於。它使整個圖像出現，但眼睛太小。

代碼：

<html> 
<head> 
<video autoplay></video> 
<img src="" width=1280, height=720> 
<canvas style="display:none;"></canvas> 
<script> 
    var errorCallback = function(e) { 
    console.log('Reeeejected!', e); 
    video.src = 'failure.mp4'; // fallback. 
    }; 

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 

var video = document.querySelector('video'); 
var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 
var localMediaStream = null; 
var hdConstraints = { 
    video: { 
    mandatory: { 
     minWidth: 1280, 
     minHeight: 720 
    } 
    } 
}; 

function snapshot() { 
    if (localMediaStream) { 
     ctx.drawImage(video, 0, 0); 
     // "image/webp" works in Chrome. 
     // Other browsers will fall back to image/png. 
     document.querySelector('img').src = canvas.toDataURL('image/webp'); 
    } 
    } 

function success(stream) { 
    video.src = window.URL.createObjectURL(stream); 
    localMediaStream = stream; 
} 
video.addEventListener('click', snapshot, false); 
navigator.getUserMedia(hdConstraints, success,errorCallback); 
</script> 
</head> 
</html>

結果：

視頻：

example input

圖像輸出：

example output

來源

2014-10-29 Kyle

你在正確的軌道上，將'ctx.drawImage（video，0，0，1280,720）;'改成'ctx.drawImage（video，0，0,640,360）'的行;'for例。基本上你需要調整大小並保持相同的高寬比以使其看起來正確。 – Loktar 2014-10-29 18:40:27

噢好吧，這是有道理的，以及我沒有得到整個圖像適合使用以下內容：ctx.drawImage（video，0，0，320,180）;.但是圖像質量的損失非常激烈。有什麼辦法可以避免這種情況？ – Kyle 2014-10-29 18:44:42

所以在與@ Loktar的評論的同時，我確定的祕訣是，設置畫布大小在HTML像這樣：

<canvas style="display:none;" width=1280 height=720></canvas>

這使得用於全屏（方面正確）捕捉。

希望這可以幫助別人！

來源

2014-10-29 21:16:08 Kyle

Javascript攝像頭快照拉得太大

回答

相關問題