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

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

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


  • Emil

    Nice, however you have an error in IE8:

    Error 2: This image is not valid.

  • oten

    waw, nice……

  • Fawad Hassan

    Excellent plugin

  • Beben Koben

    so funny…thanks :D