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摄像头快照拉得太大

回答

相关问题