Learning jQuery

Now days face detection is a common feature in most digital cameras. The white square that you see around someones face when camera is focused on the person. In this post, you will see how can you detect faces in an image using jQuery.

Face detection is a jQuery plugin that returns the coordinates of the faces in the image. This plugin uses CCV algorithm. To use this plugin, you need to download the plugin first. Please download the plugin from here.

Okay, so you have download the plugin. The zip file has 3 .js files. 2 in face Detection and one in js folder. You need to reference all the js file.

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
<script src="js/facedetection/ccv.js"></script> 
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script> 

Now place a image in your page. Make sure the image have one or more face.

<div id="content"> 
   <img id="myPicture" src="img/face.jpg">
</div> 

Now on this image object, we need to call the facedetection method which returns the coordinates of the image.

$(function() {
   var coords = $('#myPicture').faceDetection();
});

The faceDetection method returns an array object and coords variables becomes an array. Following is the result of array elements.

x: Y coord of the face
y: Y coord of the face
width: Width of the face
height: Height of the face
positionX: X position relative to the document
positionY: Y position relative to the document
offsetX: X position relative to the offset parent
offsetY: Y position relative to the offset parent
confidence: Level of confidence

Now when you got the coordinates, you need to create a div element and place the div on these coordinates and append the div to content div in which image is place.

for (var i = 0; i < coords.length; i++) {
 $('<div>', {
  'class':'face',
  'css': {
    'position': 'absolute',
    'left':  coords[i].positionX +5+'px',
    'top':  coords[i].positionY +5+'px',
    'width':  coords[i].width  +'px',
    'height':  coords[i].height +'px'
   }
 })
.appendTo('#content');
}

Here is the CSS class face.

.face 
{
  border:2px solid #FFF;
}

See live Demo.

As you can see from Demo, its not that accurate but quite a nice and useful Java Script and jQuery plugin. But this is just the initial release and accuracy will be better over the time and we will get more accurate results.

Feel free to contact me for any help related to jQuery. I will gladly help you.