Use your left/right keys to browse tutorials
jQuery Face Detection

jQuery Face Detection

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on November 5, 2010

Jay Salvat just posted a brilliant plugin that automatically detects faces in a picture. You can download the code from Git Hub or check out the demo here

The plugin is fairly easy to integrate into a social application, all you need to do is add the following code to a page so when you click the ‘detect faces’ button the plugin is run.

you also need to include 3 javascript files. The algorithm for detecting faces was originally written by Liu Liu

$(function() {
		$('#detect').click(function() {
			var coords = $('#demo img').faceDetection({
				start:function(img) {
				complete:function(img, coords) {
				error:function(img, code, message) {
					alert('Error '+code+': '+message);	
			for (var i = 0; i < coords.length; i++) {
				$('<div>', {
					'css': {
						'position':	'absolute',
						'left':		coords[i].positionX	+'px',
						'top':		coords[i].positionY	+'px',
						'width': 	coords[i].width		+'px',
						'height': 	coords[i].height	+'px'
			return false;


More tutorials from Papermashup
  • nisha

    After detecting face how to let users to write which square represents who ?
    If 3 face box are shown, I want to get 3 text boxes where user can write names and those 3 names appear over each box when press submit

  • thejquery

    You need run on a web server in order to work.