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) {
					$('.face').remove();
					$('#detect').text('Processing...');
				},
				complete:function(img, coords) {
					$('#detect').fadeOut();
				},
				error:function(img, code, message) {
					alert('Error '+code+': '+message);	
				}
			});
			
			for (var i = 0; i < coords.length; i++) {
				$('<div>', {
					'class':'face',
					'css': {
						'position':	'absolute',
						'left':		coords[i].positionX	+'px',
						'top':		coords[i].positionY	+'px',
						'width': 	coords[i].width		+'px',
						'height': 	coords[i].height	+'px'
					}
				})
				.appendTo('#demo');
			}
			
			return false;
		});
	});

download



More tutorials from Papermashup
Comments
13 discussions around jQuery Face Detection
Newer Comments
  1. eanimator says:

    It is not detecting faces having beard.

    Can someone explain the code – how it works?

  2. Carlos Alexandre says:

    help me in my code’s always this error: Error 2: This image is not valid, so it can never execute them properly

  3. Jam says:

    Emil , if you run the web application with localhost then u will not get the error “The Image is not valid”

  4. Metacowboy says:

    very neet code would be great to add some code to FB Tag the faces on the Blog

  5. Vitor Almeida says:

    Yeah… really nice script with canvas.. but broken on IE8.. didnt test on IE7..

    but very nice start !!! ty for share

  6. Lisa says:

    So what is the practical use of this?

    • Ashley says:

      @Lisa imagine you upload a picture to facebook and it automatically detects the faces and tags your friends without you needing to do it.

      It’s easily done.

      Ashley

  7. Emil says:

    Nice, however you have an error in IE8:

    Error 2: This image is not valid.

  8. oten says:

    waw, nice……

  9. Fawad Hassan says:

    Wao!
    Excellent plugin

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.