<分区>
<分区>
我在尝试制作一个网页时遇到了一个奇怪的问题，我想在该网页上从访问者网络摄像头捕获图片。我有两个 div，中间有一个按钮，当在第二个 div 的 Canvas 上单击按钮时，在第一个 div 中绘制网络摄像头流的内容。
问题是我的流图像似乎被剪裁了:似乎只捕获了左上角。我试过玩 Canvas 的尺寸和包含它的 div 无济于事。当我将 Canvas 另存为图像时，问题仍然存在。
这是我做的一个测试页面，有这个问题:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Webcam test</title>
<style>
#picturecontaienr {
width: 800px;
height: 800px;
}
#takenpicture {
width: 750px;
height: 750px;
margin: 0%;
padding: 0%;
}
</style>
</head>
<body>
<h1>Webcam test!</h1>
<div id="webcamcontainer">
<video width="500" height="500" autoplay="true" id="webcamstream">
</video>
</div>
<button id="takepicture">Take picture!</button>
<div id="picturecontainer">
<canvas id="takenpicture">
</canvas>
<script>
var video = document.getElementById ( "webcamstream" );
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia );
if ( navigator.getUserMedia ) {
navigator.getUserMedia ( {video:true}, function ( stream ) {
video.src = window.URL.createObjectURL ( stream );
}, function ( ) {
document.getElementById ( "videocontainer" ).innerHTML += "<p>You did not give permission to take a picture of your QR code!</p>";
} );
}
document.getElementById ( "takepicture" ).addEventListener ( "click", function ( ) {
var drawingContext = document.getElementById ( "takenpicture" ).getContext ( "2d" );
drawingContext.drawImage ( video, 0, 0, 500, 500 );
//var imageSource = document.getElementById ( "takenpicture" ).toDataURL ( "image/png" );
//alert ( imageSource );
} );
</script>
</body>
</html>如果有人能指出正确的方向，我将不胜感激。
提前致谢， 约书亚
最佳答案
首先，一个错字:#picturecontaienr在你的 CSS 中应该匹配 <div id="picturecontainer">在你的 html 中。
编辑: 这里有一个 Plunker 展示了我的意思，尽管看起来尺寸实际上应该更小。看看摆弄这个是否有帮助。 https://embed.plnkr.co/efHNA5SgLenSc0dyEgDE/ (我在 plunker 中使用的源代码和图片归功于 W3schools.com!)
我没有使用 Canvas 的经验，也没有代表发表评论，但这可能是一个原因:drawingContext.drawImage ( video, 0, 0, 500, 500 );将图像的起点设置为左上角 (0,0)，然后将终点设置为 (500, 500)，但您的 Canvas 是:
#picturecontaienr {width: 800px; height: 800px;}
#takenpicture {width: 750px; height: 750px; margin: 0%; padding: 0%;}
因此理论上图像将在 Canvas 中间的 500, 500 处终止。我的猜测是网络摄像头试图以与拍摄照片相同的分辨率进行绘制，这可能会更大，具体取决于摄像头的默认图片分辨率。尝试设置 drawingContext.drawImage ( video, 0, 0, 1000, 1000);看看它是否有所作为。
如果您不想让您的 div/canvas 变大，您可以申请 overflow: auto;到里面的 css 并保持你的盒子大小相同，但如果图像太大，至少让你看到一个滚动条。
如果这有帮助，请告诉我!
关于javascript - Canvas:使用drawImage捕获流只捕获流图像的左上角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47803091/