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
  • eanimator

    It is not detecting faces having beard.

    Can someone explain the code – how it works?

  • Carlos Alexandre

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

  • Jam

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

  • http://blog.metaprime.at Metacowboy

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

  • Vitor Almeida

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

    but very nice start !!! ty for share

  • Lisa

    So what is the practical use of this?

    • http://www.papermashup.com Ashley

      @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

  • Emil

    Nice, however you have an error in IE8:

    Error 2: This image is not valid.

  • http://www.ifzonedesign.com oten

    waw, nice……

  • http://www.ifadey.com Fawad Hassan

    Wao!
    Excellent plugin

  • http://beben-koben.blogspot.com/ Beben Koben

    so funny…thanks :D