register.html
4.36 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
<!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()
{
alert(tempImage)
let canvas = document.createElement('canvas');
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(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);
}
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)
{
alert('얼굴이 인식되지 않았습니다.');
}
else
{
alert('하나의 얼굴만 등록해주세요.')
}
}
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;
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" 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>
<canvas id="preview"></canvas>
</div>
<input id="sender" type="button" onclick="submit" value="등록" disabled>
</div>
</div>
</div>
</body>
</html>