Javascript相机快照拉伸过大_Javascript_Html

Javascript相机快照拉伸过大

javascript html

Javascript相机快照拉伸过大,javascript,html,Javascript,Html,我正在尝试通过javascript从某人的网络摄像头拍摄快照。代码可以正常工作，但生成的图像拉伸太大，我无法阅读我搞砸了：ctx.drawImage（视频，0，0）；线我试过ctx.drawImage（视频，001280720）；没有区别我试过ctx.drawImage（视频，0100）；差别很大。它使整个图像看起来很清晰，但对眼睛来说太小了代码： <html> <head> <video autoplay></video> <img

我正在尝试通过javascript从某人的网络摄像头拍摄快照。代码可以正常工作，但生成的图像拉伸太大，我无法阅读

我搞砸了：ctx.drawImage（视频，0，0）；线

我试过ctx.drawImage（视频，001280720）；没有区别

我试过ctx.drawImage（视频，0100）；差别很大。它使整个图像看起来很清晰，但对眼睛来说太小了

代码：

<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>


var errorCallback=函数（e）{
log（'reeejected！'，e）；
video.src='failure.mp4'；//回退。
};
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={
视频：{
强制性：{
最小宽度：1280，
最小身高：720
}
}
};
函数快照（）{
if（本地媒体流）{
ctx.drawImage（视频，0,0）；
//“图像/webp”在Chrome中工作。
//其他浏览器将退回到image/png。
document.querySelector（'img'）.src=canvas.toDataURL（'image/webp'）；
}
}
功能成功（流）{
video.src=window.URL.createObjectURL（流）；
localMediaStream=stream；
}
video.addEventListener（'click'，snapshot，false）；
getUserMedia（hdConstraints、success、errorCallback）；

结果：

<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>

视频：

<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>

图像输出：

<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>

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

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

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

希望这对其他人有帮助

在正确的轨道上，更改

ctx.drawImage（视频，0，01280720）到类似于ctx.drawImage（视频，0，0640360）的东西例如。基本上，你需要调整大小并保持相同的纵横比，以使其看起来正确。哦，好吧，这是有意义的，我确实使用以下方法使整个图像适合：ctx.drawImage（视频，0，0，320180）；。但图像质量的损失是巨大的。有什么办法可以避免吗？