2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
2211e9ad 1 parent 78152ebd

Update register.html

Inline Side-by-side
Showing 2 changed files with 17 additions and 7 deletions
......@@ -100,7 +100,7 @@ function main()
let canvasContext = canvasOutput.getContext('2d');
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
var dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
let dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
let cap = new cv.VideoCapture(video);
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();
......
......@@ -41,12 +41,20 @@ function init()
.then(function (stream) {
video.srcObject = stream;
video.addEventListener('canplay', () => {
var screenWidth = $(document).width();
var screenHeight = $(document).height();
var contentWidth = $('.w3-content').width();
var contentHeight = $('.w3-content').height();
var ratio = 1.0;
video.width = video.videoWidth;
video.height = video.videoHeight;
container.style.width = video.videoWidth + 'px';
container.style.height = video.videoHeight + 'px';
canvasOutput.width = video.videoWidth;
canvasOutput.height = video.videoHeight;
if (video.width > screenWidth || contentHeight > screenHeight){
ratio = Math.min(screenWidth / video.width * 1.0, 1 - (contentHeight - screenheight) / (video.height * 1.0));
}
container.style.width = Math.round(video.width * ratio) + 'px';
container.style.height = Math.round(video.height * ratio) + 'px';
canvasOutput.width = Math.round(video.width * ratio);
canvasOutput.height = Math.round(video.height * ratio);
load_cascade();
});
}).catch(function (err0r) {
......@@ -73,6 +81,7 @@ function main()
let canvasContext = canvasOutput.getContext('2d');
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
let cap = new cv.VideoCapture(video);
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();
......@@ -158,6 +167,7 @@ function main()
}
}
// to do resize preview
cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
cv.imshow('canvasOutput', dst);
// schedule the next one.
let delay = 1000/FPS - (Date.now() - begin);
......@@ -232,7 +242,7 @@ function submit()
<body onload="cv['onRuntimeInitialized']=()=>{init();};" class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<div class="w3-content">
<!-- Header -->
<header class="w3-container w3-center">
<h1><b>얼굴 등록</b></h1>
......@@ -246,7 +256,7 @@ and is wrapped around the whole page content, except for the footer in this exam
<video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video>
<canvas id="canvasOutput"></canvas>
</div>
<div>
<div id="inputForm">
<strong>얼굴 이미지는 서버에 저장되지 않습니다</strong><br>
<strong>(복원 불가능한 512차원 벡터로 변환됩니다)</strong><br>
<strong>학번과 이름은 임의로 입력해주세요</strong><br>
......