11/21/2014

Face Detection with jQuery

Face Detection with jQuery

By David Walsh on October 20, 2011

21

I've always been intrigued by recognition software because I cannot imagine

the logic that goes into all of the algorithms. Whether it's voice, face, or
other types of detection, people look and sound so different, pictures are
shot differently, and from different angles, I cannot fathom how it's all
done. Since I already covered booby nudity detection with JavaScript, I
thought it would be worth some time to explore face detection. Facebook
uses it, so maybe it has application in your websites.

One face detection library I found is Face Detection by Jay Salvat and Liu
Liu. This is a standard jQuery plugin that receives an image and returns an
array of coordinates of faces found within the image. Let's have a look at
how to use it!
View Demo

http://davidwalsh.name/face-detection-jquery

1/4

11/21/2014

Face Detection with jQuery

jQuery.faceDetection

Four JS files are required for this jQuery plugin:

<!-- send in the clowns -->

<script src="jquery-1.4.3.min.js"></script>

<!-- mas js -->

<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

The faceDetection plugin wraps functionality within the first two JavaScript
files, and returns an array of objects which represent the coordinates of the
faces within the photo (if any are found). An example would be:

var coords = jQuery("#myImage").faceDetection();

/* Returns:
{
x: 525
y: 435,
width: 144,
height: 144,
positionX: 532.6353328125226,
positionY: 443.240976080536,
offsetX: 532.6353328125226,
offsetY: 443.240976080536,
confidence: 12.93120119,
neighbour: undefined,
}
*/

You may also add event callbacks to every call:

http://davidwalsh.name/face-detection-jquery

2/4

11/21/2014

Face Detection with jQuery

var coords = jQuery("#myImage").faceDetection({

complete: function(image, coords) {
// Do something
},
error: function() {
console.warn("Could not process image");
}
});

It's up to you what you'd like to do when the faces have been found. You
could add a square around the person's face:

jQuery("img").each(function() {
var img = this;
// Get faces cooridnates
var coordinates = jQuery(img).faceDetection();
// Make boxes if faces are found
if(coordinates.length) {
coordinates.forEach(function(coord) {
jQuery("<div>", {
css: {
position: "absolute",
left: coord.positionX + 5 + "px",
top: coord.positionY + 5 + "px",
width: coord.width + "px",
height: coord.height + "px",
border: "3px solid white"
}
}).appendTo(img.parentNode);
});
}
});
</div>
http://davidwalsh.name/face-detection-jquery

3/4

11/21/2014

Face Detection with jQuery

There's not much more to it than that!

View Demo

I tried to vary the photos I used faceDetection on and as I expected, the

results are the not perfect. They are, however, quite good; no software will
be perfect for all cases. The software also does not do facial comparison, so
you would need to provide suggestions as to the face's identity via another
method. For what this plugin is meant to do, however, it does pretty well. I
encourage you to give this a try!

http://davidwalsh.name/face-detection-jquery

4/4