register.html
4.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Attendance System Register</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean">
<style>body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}</style>
<script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type='text/javascript'>
function load_cascade()
{
let faceCascadeFile = 'haarcascade_frontalface_default.xml'
let faceCascadeURL = 'static/js/haarcascade_frontalface_default.xml'
let utils = new Utils('errorMessage');
utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => {
activate()
});
}
function activate()
{
let fileloader = document.getElementById("fileloader");
fileloader.disabled = false;
}
function detect_face()
{
let classifier = new cv.CascadeClassifier();
classifier.load('haarcascade_frontalface_default.xml');
let src = cv.imread('imagefile');
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let gray = new cv.Mat();
src.copyTo(dst);
cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
let msize = new cv.Size(120, 120);
// detect faces.
classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize);
// 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(face.x - 22, face.y - 22, face.width + 22, face.height + 22);
let cropped = src.roi(rect);
cv.imshow(tempCanvas,cropped);
}
if (faces.size() == 1)
{
let sender = document.getElementById("sender");
sender.disabled = false;
}
else if (faces.size() == 0)
{
alert('얼굴이 인식되지 않았습니다.');
}
else
{
alert('하나의 얼굴만 등록해주세요.')
}
cv.imshow('preview', dst);
}
function submit()
{
let b64encoded = tempCanvas.toDataURL('image/jpeg', 1.0);
let student_id = document.getElementById('student_id').value;
let student_name = document.getElementById('student_name').value;
b64encoded = b64encoded.replace('data:image/jpeg;base64,', '')
$.ajax({
type: "POST",
url: "/register",
dataType: "json",
data: {'image':b64encoded, 'student_id':student_id, 'student_name':student_name},
success: function(data){
if (data.status == "success"){
alert("등록 성공");
}
else{
alert("등록 실패")
}
}
})
}
var loadFile = function(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
output.onload = function() {
var output = document.getElementById('imagefile');
output.src = URL.createObjectURL(event.target.files[0]);
detect_face()
}
};
let tempCanvas = document.createElement("canvas");
</script>
</head>
<body onload="cv['onRuntimeInitialized']=()=>{load_cascade();};" 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">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>얼굴 등록</b></h1>
<p>Made by <span class="w3-tag">정해갑</span></p>
</header>
<div class="w3-row", style='text-align:center'>
<h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2>
<div>
학번: <input type="text" name="student_id"><br>
이름: <input type="text" name="student_name"><br><br>
<input type="file" id="fileloader" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled>
<div>
<img id="imagefile" style="display:none;">
<canvas id="preview"></canvas>
</div>
<input id="sender" type="button" onclick="submit" value="등록" disabled>
</div>
</div>
</div>
</body>
</html>