Professional Documents
Culture Documents
Face Detection With JQuery
Face Detection With JQuery
21
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
jQuery.faceDetection
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:
2/4
11/21/2014
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
http://davidwalsh.name/face-detection-jquery
4/4