Resize registered image

-flask run --host 0.0.0.0 --cert=cert.pem --key=key.pem
+python3 -m flask run --host 0.0.0.0 --port 443 --cert=cert.pem --key=key.pem

@@ -112,7 +112,9 @@ function processVideo() {
             let point2 = new cv.Point(face.x + face.width, face.y + face.height);
             cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
             let cropped = new cv.Mat();
-            let rect = new cv.Rect(Math.max(face.x - 22, 0), Math.max(face.y - 22, 0), face.width + 22, face.height + 22);
+            let margin_x = face.width / 5;
+            let margin_y = face.height / 5;
+            let rect = new cv.Rect(Math.max(face.x - margin_x, 0), Math.max(face.y - margin_y, 0), face.width + margin_x, face.height + margin_y);
             cropped = src.roi(rect);
             let tempCanvas = document.createElement("canvas");
             cv.imshow(tempCanvas,cropped);

@@ -47,32 +47,39 @@ function detect_face()
 	let msize = new cv.Size(120, 120);
 	// detect faces.
 	classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize);
+	if (faces.size() == 0)
+	{
+	    alert('얼굴이 인식되지 않았습니다.');
+	}
+	else if (faces.size() > 1)
+	{
+		alert('하나의 얼굴만 등록해주세요.')
+	}
 	// draw faces.
 	for (let i = 0; i < faces.size(); ++i) {
 		let face = faces.get(i);
 		let point1 = new cv.Point(face.x, face.y);
 		let point2 = new cv.Point(face.x + face.width, face.y + face.height);
 		cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
-		// margin 44
-		let rect = new cv.Rect(Math.max(face.x - 22, 0), Math.max(face.y - 22, 0), face.width + 22, face.height + 22);
+		let margin_x = face.width / 5;
+                let margin_y = face.height / 5;
+		let rect = new cv.Rect(Math.max(face.x - margin_x, 0), Math.max(face.y - margin_y, 0), face.width + margin_x, face.height + margin_y);
                 let cropped = src.roi(rect);
                 cv.imshow(tempCanvas,cropped);
 	}
-	let preview = document.getElementById('preview');
-	cv.imshow(preview, dst);
 	if (faces.size() == 1)
 	{
 		let sender = document.getElementById("sender");
 		sender.disabled = false;
 	}
-	else if (faces.size() == 0)
+	if (dst.cols > $(window).width())
 	{
-	    alert('얼굴이 인식되지 않았습니다.');
-	}
-	else
-	{
-		alert('하나의 얼굴만 등록해주세요.')
+            let ratio = $(window).width() / parseFloat(dst.cols);
+	    let dsize = new cv.Size(dst.cols * ratio, dst.rows * ratio);
+	    cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
 	}
+        let preview = document.getElementById('preview');
+	cv.imshow(preview, dst);
 }
 
 function submit()