1. jQuery.face Detection
To getting started with the plugin, you need to include these four files first.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.facedetection.js"></script>
The first two JavaScript files can be used to wrap the desirable functionality. The same files will also return the array of objects, representing the face coordinates within the photo. Look at the below example to understand the concept better.
$('#image').faceDetection();
/* Returns:
{
confidence 3.7898368899999966
height 69.31260725171516
neighbors 11
offsetX 83.6700690058318
offsetY 219.16498538197757
positionX 492.1700690058318
positionY 189.16498538197757
scaleX 0.375
scaleY 0.375
width 69.31260725171516
x 492.1700690058318
y 189.16498538197757
}
*/
You can also include event callbacks to each and every call just like this.
$('#image').faceDetection({
complete: function (faces) {
// Define function
}
Callback function triggered at the time of errors.
error:function (code, message) {
alert('Error: ' + message);
}
It's completely a matter of personal choice what you'd like to do as and when the detection is being completed. Look at the example below to put a square around the person's face.
$('#image').faceDetection({
complete: function (faces) {
// Define function
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'detect-face',
'css': {
'position': 'absolute',
'left': faces[i].x * faces[i].scaleX + 'px',
'top': faces[i].y * faces[i].scaleY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
},
error:function (code, message) {
alert('Error: ' + message);
}
});
Results
Returns an array of with found face objects:
-
x- Y cord of the face
-
y- Y cord of the face
-
Width- width of the face
-
height- Height of the face
-
position x- X position as per the document
-
position y- y position as per the document
-
offsetX- X position relative to the offset parent
-
offsetY- Y position relative to the document
-
scaleX- the ratio between the image width and the width with which it's being displayed.
-
ScaleY- The ratio between the image height and the height with which it is being used to display
-
confidence- level of confidence
Full Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Detect Faces Using jQuery Face Detection Plugin</title>
<link rel="stylesheet" href="css/styles.css">
<style>
.image-container {
position: relative;
width: 600px;
height: auto;
margin: 20px auto;
border: 10px solid #333;
box-shadow: 0 5px 5px #000;
}
.image {
display: block;
width: 100%;
height: auto;
}
.detect-face {
position: absolute;
border: 2px solid #000;
}
#try-it {
display: block;
width: 150px;
height: 30px;
line-height: 30px;
background: #444;
text-align: center;
margin: 0 auto;
color: #FFF;
border-radius: 10px;
border: 1px solid #000;
box-shadow: 0 0 5px #333;
}
</style>
</head>
<body>
<div class="image-container">
<img id="image" class="image" src="assets/group+of+successful+business+people.jpg">
</div>
<a id="try-it" href="#">Detect Face</a>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.facedetection.js"></script>
<script>
$(function() {
$('#try-it').click(function(e) {
$('.detect-face').remove();
$('#image').faceDetection({
complete : function(faces) {
// Define function
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class' : 'detect-face',
'css' : {
'position' : 'absolute',
'left' : faces[i].x * faces[i].scaleX + 'px',
'top' : faces[i].y * faces[i].scaleY + 'px',
'width' : faces[i].width * faces[i].scaleX + 'px',
'height' : faces[i].height * faces[i].scaleY + 'px'
}
}).insertAfter(this);
}
},
error : function(code, message) {
alert('Error: ' + message);
}
});
});
});
</script>
</body>
</html>
