2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
7b31367b 1 parent 50456010

Make register page

Inline Side-by-side
Showing 3 changed files with 118 additions and 44 deletions
......@@ -71,14 +71,11 @@ def register():
msg='[{id}] is registered'.format(id=student_id)
print(msg)
# image to input tensor
file = request.files['file']
image_bytes = file.read()
image_np = np.fromstring(image_bytes, dtype=np.uint8)
image = base64.b64decode(request.form['image'])
image_np = np.frombuffer(image, dtype=np.uint8)
image_np = cv2.imdecode(image_np, cv2.IMREAD_UNCHANGED)
cv2.imwrite('./test.jpg', image_np)
image_np = resize(image_np)
image_np = prewhiten(image_np)
cv2.imwrite('./test2.jpg', image_np)
image_np = image_np.reshape(-1, image_size, image_size, 3)
# get embedding
feed_dict = {input_placeholder:image_np, phase_train_placeholder:False }
......
......@@ -111,34 +111,34 @@ 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(face.x, face.y, face.width, face.height);
let rect = new cv.Rect(face.x - 22, face.y - 22, face.width + 22, face.height + 22);
cropped = src.roi(rect);
let tempCanvas = document.createElement("canvas");
cv.imshow(tempCanvas,cropped);
if (tracker.register(face.x, face.y, face.width, face.height, Date.now())){
let b64encoded = tempCanvas.toDataURL("image/jpeg", 1.0);
b64encoded = b64encoded.replace('data:image/jpeg;base64,', '')
$.ajax({
type: "POST",
url: "/verify",
dataType: "json",
data: {'image':b64encoded},
success: function(data){
if (data.status == "success"){
var newDiv = document.createElement("div");
var newContent = document.createTextNode("출석");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
else{
var newDiv = document.createElement("div");
var newContent = document.createTextNode("실패");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
}
});
}
if (tracker.register(face.x, face.y, face.width, face.height, Date.now())){
let b64encoded = tempCanvas.toDataURL("image/jpeg", 1.0);
b64encoded = b64encoded.replace('data:image/jpeg;base64,', '')
$.ajax({
type: "POST",
url: "/verify",
dataType: "json",
data: {'image':b64encoded},
success: function(data){
if (data.status == "success"){
var newDiv = document.createElement("div");
var newContent = document.createTextNode("출석");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
else{
var newDiv = document.createElement("div");
var newContent = document.createTextNode("실패");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
}
}
});
}
}
cv.imshow('canvasOutput', dst);
// schedule the next one.
......
......@@ -4,12 +4,90 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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&amp;subset=korean">
<script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}
</style>
<body class="w3-light-grey">
<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'>
let tempCanvas = document.createElement("canvas");
function load_cascade()
{
let faceCascadeFile = 'haarcascade_frontalface_default.xml'
let faceCascadeURL = "{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}"
let utils = new Utils('errorMessage');
utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => {
activate()
});
}
function activate()
{
document.getElementById("myFile").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)
{
document.getElementById("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("등록 실패")
}
}
})
}
</script>
<body class="w3-light-grey" onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }">
<!-- 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">
......@@ -22,25 +100,24 @@ and is wrapped around the whole page content, except for the footer in this exam
<div class="w3-row", style='text-align:center'>
<h2><b>얼굴 파일을 등록해주세요 (jpeg only)</b></h2>
<form method="post" action="/register" enctype="multipart/form-data">
학번: <input type="text" name="student_id"><br>
이름: <input type="text" name="student_name"><br><br>
<input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required>
<div>
<img id="preview">
학번: <input type="text" name="student_id"><br>
이름: <input type="text" name="student_name"><br><br>
<input type="file" 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>
<input type="submit" value="등록">
</form>
<script>
var loadFile = function(event) {
var output = document.getElementById('preview');
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.result;
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
var output = document.getElementById('imagefile');
output.src = URL.createObjectURL(event.target.files[0]);
detect_face()
}
};
</script>
......