Question

我正试图通过javascript从某人的网络摄像头拍摄快照。代码可以工作，但结果图像的拉伸方式对我来说太可读了。

我已经弄乱了：ctx.drawImage（video，0,0）; line

我已尝试过ctx.drawImage（视频，0,0,1280,720）;没有区别

我已经尝试过ctx.drawImage（视频，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

Answer 1

因此，结合@Loktar的评论，我确定秘密是在html中设置画布大小，如下所示：

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

这允许全屏（方面正确）捕获。

希望这有助于其他人！

Javascript相机快照拉得太大了

1 个答案: