Showing
3 changed files
with
94 additions
and
20 deletions
... | @@ -71,14 +71,11 @@ def register(): | ... | @@ -71,14 +71,11 @@ def register(): |
71 | msg='[{id}] is registered'.format(id=student_id) | 71 | msg='[{id}] is registered'.format(id=student_id) |
72 | print(msg) | 72 | print(msg) |
73 | # image to input tensor | 73 | # image to input tensor |
74 | - file = request.files['file'] | 74 | + image = base64.b64decode(request.form['image']) |
75 | - image_bytes = file.read() | 75 | + image_np = np.frombuffer(image, dtype=np.uint8) |
76 | - image_np = np.fromstring(image_bytes, dtype=np.uint8) | ||
77 | image_np = cv2.imdecode(image_np, cv2.IMREAD_UNCHANGED) | 76 | image_np = cv2.imdecode(image_np, cv2.IMREAD_UNCHANGED) |
78 | - cv2.imwrite('./test.jpg', image_np) | ||
79 | image_np = resize(image_np) | 77 | image_np = resize(image_np) |
80 | image_np = prewhiten(image_np) | 78 | image_np = prewhiten(image_np) |
81 | - cv2.imwrite('./test2.jpg', image_np) | ||
82 | image_np = image_np.reshape(-1, image_size, image_size, 3) | 79 | image_np = image_np.reshape(-1, image_size, image_size, 3) |
83 | # get embedding | 80 | # get embedding |
84 | feed_dict = {input_placeholder:image_np, phase_train_placeholder:False } | 81 | feed_dict = {input_placeholder:image_np, phase_train_placeholder:False } | ... | ... |
... | @@ -111,7 +111,7 @@ function processVideo() { | ... | @@ -111,7 +111,7 @@ function processVideo() { |
111 | let point2 = new cv.Point(face.x + face.width, face.y + face.height); | 111 | let point2 = new cv.Point(face.x + face.width, face.y + face.height); |
112 | cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); | 112 | cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); |
113 | let cropped = new cv.Mat(); | 113 | let cropped = new cv.Mat(); |
114 | - let rect = new cv.Rect(face.x, face.y, face.width, face.height); | 114 | + let rect = new cv.Rect(face.x - 22, face.y - 22, face.width + 22, face.height + 22); |
115 | cropped = src.roi(rect); | 115 | cropped = src.roi(rect); |
116 | let tempCanvas = document.createElement("canvas"); | 116 | let tempCanvas = document.createElement("canvas"); |
117 | cv.imshow(tempCanvas,cropped); | 117 | cv.imshow(tempCanvas,cropped); | ... | ... |
... | @@ -4,12 +4,90 @@ | ... | @@ -4,12 +4,90 @@ |
4 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 4 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
5 | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | 5 | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
6 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean"> | 6 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean"> |
7 | -<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script> | ||
8 | <style> | 7 | <style> |
9 | body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif} | 8 | body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif} |
10 | </style> | 9 | </style> |
11 | -<body class="w3-light-grey"> | 10 | +<script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script> |
11 | +<script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script> | ||
12 | +<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script> | ||
13 | +<script type='text/javascript'> | ||
14 | +let tempCanvas = document.createElement("canvas"); | ||
15 | +function load_cascade() | ||
16 | +{ | ||
17 | + let faceCascadeFile = 'haarcascade_frontalface_default.xml' | ||
18 | + let faceCascadeURL = "{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}" | ||
19 | + let utils = new Utils('errorMessage'); | ||
20 | + utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => { | ||
21 | + activate() | ||
22 | + }); | ||
23 | +} | ||
24 | +function activate() | ||
25 | +{ | ||
26 | + document.getElementById("myFile").disabled = false; | ||
27 | +} | ||
28 | + | ||
29 | +function detect_face() | ||
30 | +{ | ||
31 | + let classifier = new cv.CascadeClassifier(); | ||
32 | + classifier.load('haarcascade_frontalface_default.xml'); | ||
33 | + let src = cv.imread('imagefile'); | ||
34 | + let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4); | ||
35 | + let gray = new cv.Mat(); | ||
36 | + src.copyTo(dst); | ||
37 | + cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0); | ||
38 | + let msize = new cv.Size(120, 120); | ||
39 | + // detect faces. | ||
40 | + classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize); | ||
41 | + // draw faces. | ||
42 | + for (let i = 0; i < faces.size(); ++i) { | ||
43 | + let face = faces.get(i); | ||
44 | + let point1 = new cv.Point(face.x, face.y); | ||
45 | + let point2 = new cv.Point(face.x + face.width, face.y + face.height); | ||
46 | + cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); | ||
47 | + // margin 44 | ||
48 | + let rect = new cv.Rect(face.x - 22, face.y - 22, face.width + 22, face.height + 22); | ||
49 | + let cropped = src.roi(rect); | ||
50 | + cv.imshow(tempCanvas,cropped); | ||
51 | + } | ||
52 | + if (faces.size() == 1) | ||
53 | + { | ||
54 | + document.getElementById("sender").disabled = false; | ||
55 | + } | ||
56 | + else if (faces.size() == 0) | ||
57 | + { | ||
58 | + alert('얼굴이 인식되지 않았습니다.'); | ||
59 | + } | ||
60 | + else | ||
61 | + { | ||
62 | + alert('하나의 얼굴만 등록해주세요.') | ||
63 | + } | ||
64 | + cv.imshow('preview', dst); | ||
65 | +} | ||
12 | 66 | ||
67 | +function submit() | ||
68 | +{ | ||
69 | + let b64encoded = tempCanvas.toDataURL('image/jpeg', 1.0); | ||
70 | + let student_id = document.getElementById('student_id').value; | ||
71 | + let student_name = document.getElementById('student_name').value; | ||
72 | + b64encoded = b64encoded.replace('data:image/jpeg;base64,', '') | ||
73 | + $.ajax({ | ||
74 | + type: "POST", | ||
75 | + url: "/register", | ||
76 | + dataType: "json", | ||
77 | + data: {'image':b64encoded, 'student_id':student_id 'student_name':student_name}, | ||
78 | + success: function(data){ | ||
79 | + if (data.status == "success"){ | ||
80 | + alert("등록 성공"); | ||
81 | + } | ||
82 | + else{ | ||
83 | + alert("등록 실패") | ||
84 | + } | ||
85 | + } | ||
86 | + }) | ||
87 | +} | ||
88 | + | ||
89 | +</script> | ||
90 | +<body class="w3-light-grey" onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }"> | ||
13 | <!-- w3-content defines a container for fixed size centered content, | 91 | <!-- w3-content defines a container for fixed size centered content, |
14 | and is wrapped around the whole page content, except for the footer in this example --> | 92 | and is wrapped around the whole page content, except for the footer in this example --> |
15 | <div class="w3-content" style="max-width:1400px"> | 93 | <div class="w3-content" style="max-width:1400px"> |
... | @@ -22,25 +100,24 @@ and is wrapped around the whole page content, except for the footer in this exam | ... | @@ -22,25 +100,24 @@ and is wrapped around the whole page content, except for the footer in this exam |
22 | 100 | ||
23 | <div class="w3-row", style='text-align:center'> | 101 | <div class="w3-row", style='text-align:center'> |
24 | <h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2> | 102 | <h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2> |
25 | -<form method="post" action="/register" enctype="multipart/form-data"> | ||
26 | -학번: <input type="text" name="student_id"><br> | ||
27 | -이름: <input type="text" name="student_name"><br><br> | ||
28 | -<input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required> | ||
29 | <div> | 103 | <div> |
30 | -<img id="preview"> | 104 | + 학번: <input type="text" name="student_id"><br> |
105 | + 이름: <input type="text" name="student_name"><br><br> | ||
106 | + <input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled> | ||
107 | + <div> | ||
108 | + <img id="imagefile" style="display:none;"> | ||
109 | + <canvas id="preview"></canvas> | ||
110 | + </div> | ||
111 | + <input id="sender" type="button" onclick="submit" value="등록" disabled> | ||
31 | </div> | 112 | </div> |
32 | -<input type="submit" value="등록"> | ||
33 | -</form> | ||
34 | <script> | 113 | <script> |
35 | var loadFile = function(event) { | 114 | var loadFile = function(event) { |
36 | - var output = document.getElementById('preview'); | ||
37 | var reader = new FileReader(); | 115 | var reader = new FileReader(); |
38 | reader.readAsDataURL(event.target.files[0]); | 116 | reader.readAsDataURL(event.target.files[0]); |
39 | - reader.result; | ||
40 | - | ||
41 | - output.src = URL.createObjectURL(event.target.files[0]); | ||
42 | output.onload = function() { | 117 | output.onload = function() { |
43 | - URL.revokeObjectURL(output.src) // free memory | 118 | + var output = document.getElementById('imagefile'); |
119 | + output.src = URL.createObjectURL(event.target.files[0]); | ||
120 | + detect_face() | ||
44 | } | 121 | } |
45 | }; | 122 | }; |
46 | </script> | 123 | </script> | ... | ... |
-
Please register or login to post a comment