Social Network for Web Professionals

Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Detect Faces Using jQuery Face Detection Plugin

b2ap3_thumbnail_Image--1.jpg

It's quite surprising to see how these recognition softwares work especially when it comes it detecting faces. Face detection is truly an astonishing feature used by so many websites such as Facebook. In Facebook as soon as the user clicks on tag option, it lets you select the faces you wish to tag. It's a cool feature which serves the best when you have to identify faces in a photo.

Understanding the logic that works behind the algorithms of detecting faces, voice or other types, make this topic all the more interesting and catchy. Whether it's about detecting voice, getting the perfect crop, or getting the picture shot uniquely, it is amusing to know how everything is being done. With this in mind, it would be worth spending some quality time to explore the basics of face detection plugins like Face Detection by Jay Salvat and Liu and Liu.

It's an exceptionally reliable jQuery plugin that works on both images and videos. The plugin receives an image and then returns an array of coordinates of faces found within the image. The main advantage of using this plugin is that, once get the hanged, the face detection algorithm within the plugin works in an extremely simple way.

In this tutorial, I am going to explain you the complete working process of jQuery image detection plugin. The guide is extremely easy to understand and will help you in creating an image detection system within your website.

1. jQuery.face Detection

 

b2ap3_thumbnail_Image-2.jpg

 

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.

 

b2ap3_thumbnail_Image-3.jpg

$('#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

 

The probability of an image recognition primarily depends of the number of factors such as browser, and the type of image itself. In fact, the larger images take more time to get detected completely. In fact, during the testing of some images it has been found that individuals in some images are defined in different browsers in a different manner.

Face detection is an awesome feature one can have in a website. It's a perfect way to say 'who' it is in the picture. Additionally, it's a best solution available to preserve the image identification within the meta data, thus helping you to search for the images in the manner most efficient and effective.

 

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>

Rate this blog entry:
1
What We Can Learn From Apps that Make Money
Social Media Marketing in 2015: With New Trends Co...

Related Posts

Comments

 
No comments yet
Already Registered? Login Here
Guest
Monday, 26 October 2020
If you'd like to register, please fill in the username and name fields.

Captcha Image