Холст: захват потока с помощью drawImage захватывает только верхний левый угол изображения потока
У меня странная проблема при попытке создать веб-страницу, на которой я хочу сделать снимок с веб-камеры посетителей. У меня есть два div с кнопкой между ними, которая рисует содержимое потока веб-камеры в первом div в то время, когда кнопка нажимается на холсте во втором div.
Проблема в том, что изображение моего потока, кажется, обрезается: только верхний левый угол, кажется, захвачен. Я попытался поиграть с размерами холста и 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>Я был бы очень благодарен, если бы кто-то мог указать мне правильное направление.
Заранее спасибо, Джошуа
1 ответ
Во-первых, опечатка: #picturecontaienr в твоем css должно совпадать <div id="picturecontainer"> в вашем HTML.
РЕДАКТИРОВАТЬ: Вот Plunker, показывая, что я имею в виду, хотя, похоже, размеры должны быть на самом деле меньше. посмотрим, поможет ли возиться с этим. https://embed.plnkr.co/efHNA5SgLenSc0dyEgDE/(КРЕДИТ W3schools.com для исходного кода и изображения, которое я использовал в плунжере!)
У меня нет опыта работы с Canvas, и у меня нет представителя, чтобы комментировать, но это потенциально причина: drawingContext.drawImage ( video, 0, 0, 500, 500 ); Устанавливает начальную точку изображения в верхний левый угол (0,0), а затем конечную точку (500, 500), но ваш холст:
#picturecontaienr {width: 800px; height: 800px;}
#takenpicture {width: 750px; height: 750px; margin: 0%; padding: 0%;}
Следовательно, теоретически изображение будет оканчиваться на 500, 500 в середине холста. Я предполагаю, что веб-камера пытается рисовать с тем же разрешением, что и снятый снимок, который может быть больше в зависимости от стандартного разрешения камеры. Попробуйте установить drawingContext.drawImage ( video, 0, 0, 1000, 1000); чтобы увидеть, если это имеет значение.
Если вы не хотите, чтобы ваш div/canvas был больше, вы можете подать заявку overflow: auto; к css внутри либо сохраните ваш ящик того же размера, но, по крайней мере, вы увидите полосу прокрутки, если изображение слишком большое.
Дайте мне знать, если это помогло!