register.html
4.93 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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'>
var tempImage = new Image();
var tempCanvas = document.createElement("canvas");
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 canvas = document.createElement('canvas');
canvas.width = tempImage.width;
canvas.height = tempImage.height;
let ctx = canvas.getContext('2d')
ctx.drawImage(tempImage, 0, 0);
let src = cv.imread(canvas);
let dst = new cv.Mat(src.cols, src.rows, cv.CV_8UC4);
// let gray = new cv.Mat();
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();
classifier.load('haarcascade_frontalface_default.xml');
src.copyTo(dst);
// cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);
let msize = new cv.Size(tempImage.width / 4, tempImage.height / 4);
// detect faces.
classifier.detectMultiScale(dst, 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], 8);
let rect = new cv.Rect(Math.max(face.x-22, 0), Math.max(face.y-44, 0), Math.min(face.width+44, src.cols), Math.min(face.height+66, src.rows));
let cropped = src.roi(rect);
cv.imshow(tempCanvas,cropped);
}
if (faces.size() == 1)
{
let sender = document.getElementById("sender");
sender.disabled = false;
}
if (dst.cols > $(window).width() || dst.rows > $(window).height())
{
let ratio = Math.min($(window).width() / parseFloat(dst.cols), $(window).height() / parseFloat(dst.rows));
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()
{
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]);
reader.onload = function() {
tempImage.src = reader.result;
tempImage.onload = function()
{
detect_face();
}
};
};
</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" id="student_id"><br>
이름: <input type="text" id="student_name"><br><br>
<input type="file" id="fileloader" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled>
<div>
<canvas id="preview"></canvas>
</div>
<input id="sender" type="button" onclick="submit()" value="등록" disabled>
</div>
</div>
</div>
</body>
</html>