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() ...@@ -100,7 +100,7 @@ function main()
100 let canvasContext = canvasOutput.getContext('2d'); 100 let canvasContext = canvasOutput.getContext('2d');
101 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4); 101 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
102 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4); 102 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
103 - var dsize = new cv.Size(canvasOutput.width, canvasOutput.height); 103 + let dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
104 let cap = new cv.VideoCapture(video); 104 let cap = new cv.VideoCapture(video);
105 let faces = new cv.RectVector(); 105 let faces = new cv.RectVector();
106 let classifier = new cv.CascadeClassifier(); 106 let classifier = new cv.CascadeClassifier();
......
...@@ -41,12 +41,20 @@ function init() ...@@ -41,12 +41,20 @@ function init()
41 .then(function (stream) { 41 .then(function (stream) {
42 video.srcObject = stream; 42 video.srcObject = stream;
43 video.addEventListener('canplay', () => { 43 video.addEventListener('canplay', () => {
44 + var screenWidth = $(document).width();
45 + var screenHeight = $(document).height();
46 + var contentWidth = $('.w3-content').width();
47 + var contentHeight = $('.w3-content').height();
48 + var ratio = 1.0;
44 video.width = video.videoWidth; 49 video.width = video.videoWidth;
45 video.height = video.videoHeight; 50 video.height = video.videoHeight;
46 - container.style.width = video.videoWidth + 'px'; 51 + if (video.width > screenWidth || contentHeight > screenHeight){
47 - container.style.height = video.videoHeight + 'px'; 52 + ratio = Math.min(screenWidth / video.width * 1.0, 1 - (contentHeight - screenheight) / (video.height * 1.0));
48 - canvasOutput.width = video.videoWidth; 53 + }
49 - canvasOutput.height = video.videoHeight; 54 + container.style.width = Math.round(video.width * ratio) + 'px';
55 + container.style.height = Math.round(video.height * ratio) + 'px';
56 + canvasOutput.width = Math.round(video.width * ratio);
57 + canvasOutput.height = Math.round(video.height * ratio);
50 load_cascade(); 58 load_cascade();
51 }); 59 });
52 }).catch(function (err0r) { 60 }).catch(function (err0r) {
...@@ -73,6 +81,7 @@ function main() ...@@ -73,6 +81,7 @@ function main()
73 let canvasContext = canvasOutput.getContext('2d'); 81 let canvasContext = canvasOutput.getContext('2d');
74 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4); 82 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
75 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4); 83 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
84 + let dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
76 let cap = new cv.VideoCapture(video); 85 let cap = new cv.VideoCapture(video);
77 let faces = new cv.RectVector(); 86 let faces = new cv.RectVector();
78 let classifier = new cv.CascadeClassifier(); 87 let classifier = new cv.CascadeClassifier();
...@@ -158,6 +167,7 @@ function main() ...@@ -158,6 +167,7 @@ function main()
158 } 167 }
159 } 168 }
160 // to do resize preview 169 // to do resize preview
170 + cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
161 cv.imshow('canvasOutput', dst); 171 cv.imshow('canvasOutput', dst);
162 // schedule the next one. 172 // schedule the next one.
163 let delay = 1000/FPS - (Date.now() - begin); 173 let delay = 1000/FPS - (Date.now() - begin);
...@@ -232,7 +242,7 @@ function submit() ...@@ -232,7 +242,7 @@ function submit()
232 <body onload="cv['onRuntimeInitialized']=()=>{init();};" class="w3-light-grey"> 242 <body onload="cv['onRuntimeInitialized']=()=>{init();};" class="w3-light-grey">
233 <!-- w3-content defines a container for fixed size centered content, 243 <!-- w3-content defines a container for fixed size centered content,
234 and is wrapped around the whole page content, except for the footer in this example --> 244 and is wrapped around the whole page content, except for the footer in this example -->
235 - <div class="w3-content" style="max-width:1400px"> 245 + <div class="w3-content">
236 <!-- Header --> 246 <!-- Header -->
237 <header class="w3-container w3-center"> 247 <header class="w3-container w3-center">
238 <h1><b>얼굴 등록</b></h1> 248 <h1><b>얼굴 등록</b></h1>
...@@ -246,7 +256,7 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -246,7 +256,7 @@ and is wrapped around the whole page content, except for the footer in this exam
246 <video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video> 256 <video autoplay="true" id="videoInput" style="display: none; object-fit:cover;"></video>
247 <canvas id="canvasOutput"></canvas> 257 <canvas id="canvasOutput"></canvas>
248 </div> 258 </div>
249 - <div> 259 + <div id="inputForm">
250 <strong>얼굴 이미지는 서버에 저장되지 않습니다</strong><br> 260 <strong>얼굴 이미지는 서버에 저장되지 않습니다</strong><br>
251 <strong>(복원 불가능한 512차원 벡터로 변환됩니다)</strong><br> 261 <strong>(복원 불가능한 512차원 벡터로 변환됩니다)</strong><br>
252 <strong>학번과 이름은 임의로 입력해주세요</strong><br> 262 <strong>학번과 이름은 임의로 입력해주세요</strong><br>
......