Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 1 month ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery Face Detection

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 13
  • nisha
    Posted on

    nisha nisha

    Reply Author

    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
    Posted on

    thejquery thejquery

    Reply Author

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


  • eanimator
    Posted on

    eanimator eanimator

    Reply Author

    It is not detecting faces having beard.

    Can someone explain the code – how it works?


  • Carlos Alexandre
    Posted on

    Carlos Alexandre Carlos Alexandre

    Reply Author

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


  • Jam
    Posted on

    Jam Jam

    Reply Author

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


  • Metacowboy
    Posted on

    Metacowboy Metacowboy

    Reply Author

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


  • Vitor Almeida
    Posted on

    Vitor Almeida Vitor Almeida

    Reply Author

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

    but very nice start !!! ty for share


  • Lisa
    Posted on

    Lisa Lisa

    Reply Author

    So what is the practical use of this?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @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
    Posted on

    Emil Emil

    Reply Author

    Nice, however you have an error in IE8:

    Error 2: This image is not valid.


  • oten
    Posted on

    oten oten

    Reply Author

    waw, nice……


  • Fawad Hassan
    Posted on

    Fawad Hassan Fawad Hassan

    Reply Author

    Wao!
    Excellent plugin


  • Beben Koben
    Posted on

    Beben Koben Beben Koben

    Reply Author

    so funny…thanks 😀