0
私は訪問者のウェブカメラから画像をキャプチャしたいウェブページを作成しようとすると、奇妙な問題が発生します。 2つのdivの間にボタンがあり、2つ目のdivのキャンバスでボタンがクリックされたときに、最初のdivのWebカメラストリームのコンテンツが描画されます。キャンバス：drawImageでストリームをキャプチャすると、ストリーム画像の左上隅のみがキャプチャされます
問題は、ストリームの画像がクリップされているように見えることです。左上隅のみがキャプチャされているようです。キャンバスのディメンションとそれを含んでいるdivで無駄に試してみました。キャンバスを画像として保存すると、この問題は解決されません。
<!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>誰かが正しい方向に私を指すことができれば、私は非常に感謝される：ここで
は、私はそれがこの問題を持って作られたテストページです。事前に
おかげで、 ジョシュア
問題を修正しました。問題は、CSSでキャンバスの幅と高さを定義しようとしたことですが、これはうまくいかないようです（キャンバスはCSSのサイズに関係なくデフォルトのサイズのままです）。キャンバスタグの属性として幅と高さを設定することをお勧めします。 また、キャンバスの幅と高さがdrawImage呼び出しの4番目と5番目のパラメータと一致していることを確認してください。 –