jQuery를 이용하여 간단히 이미지의 얼굴을 인식하게 해주는 라이브러리가 있다. 아래 링크에서 확인하자.
https://github.com/jaysalvat/jquery.facedetection
먼저 먼저 html에 사진을 배치 하자. 그리고 하단에 인식을 시작하는 버튼을 만들자.
<!DOCTYPE html>
<html>
<head>
<title>face detection</title>
<style>
body {text-align: center;}
button {
margin-top: 20px;
}
#wrapper{
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.face {
position: absolute;
border: 2px solid #ff3333;
}
</style>
</head>
<body>
<h1>jQuery FaceDetection Demo</h1>
<div id="wrapper">
<img src="images/sample01.jpg" class="pic" id="picture">
<img src="images/sample02.jpg" class="pic" id="picture">
</div>
<button id="startButton">얼굴인식 시작</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="dist/jquery.facedetection.min.js"></script>
<script type="text/javascript">
/* global $ */
$(function () {
"use strict";
var clicked = 0;
$(window).resize(function(e){
//e.preventDefault();
if(clicked == 1){
faceDetaction();
}
});
$('#startButton').click(function(e){
e.preventDefault();
clicked = 1
//console.log('click');
faceDetaction();
});
function faceDetaction(){
$('.face').remove();//기존의 박스를 지우고
$('.pic').faceDetection({
complete: function(faces){
//console.log(faces);
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'face',
'css': {
'position': 'absolute',
'left': faces[i].positionX + 'px',
'top': faces[i].positionY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
}, error: function(code, message){
console.log("Error: " + message);
}
});
}
});
</script>
</body>
</html>
버튼을 클릭하면 이미지에서 얼굴을 인식하고 사각 박스를 그려 준다.
