Today we are going to see how to create a Facebook like face detection and tagging with the help of jQuery.

To detect faces on the image I have used a popular face detection plugin developed by jaysalvat. You can download the jQuery plugin from the Github repository : download link 

The repository itself has an example which shows how to use this script, But I’m going to show you a little bit extra feature added with that amazing script, that is tagging photos.

But, this script is just an example showing how you can do the tagging functionality, I haven’t done the entire script like Facebook. So, you have to improve the script to achieve the entire tagging functionality.

Here is the JavaScript part:

	var tagnumber = 1;

		$(document).ready(function(){

			//when you hover on a photo
			$('.findface').mouseenter(function(){

				//set $(this) in a variable to avoid conflict
				var $this = $(this);	

				//find the exact face and make it display:block
				$($this).parent().find('.face').show();			

				//find whether the faces are already detected or not
				//if not then call the faceDetection() to find the faces
				if(!($($this).hasClass('done'))){
					var coords = $($this).faceDetection({
						complete:function() {
							$($this).addClass('done');
						}
					});

					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($($this).parent());
					}
				}
			}).mouseleave(function(){
				//hide the face once the mouse leaves the photo
				$(this).parent().find('.face').hide();		
			});

			//show the faces once the mouse enter the photo
			$(document).on('hover', '.face', function(){
				$(this).parent().find('.face').show();			
			});

			//when you click the face box (white box) add a new tag
			$(document).on('click', '.face', function(){
				var $thisface = $(this);

				//find if the face is already tagged
				if($thisface.hasClass('tagAdded')){
					//if then show alert
					alert('tag added already');
				}else{
					//otherwise add the tag and add a class 'tagAdded'.
					$thisface.addClass('tagAdded');

					//set the tag identity, so when you hover the tag the face box should appear
					var tagidentity = 'tag'+tagnumber;
					$thisface.addClass(tagidentity);
					$(this).parent().find('.tags').append('<a href="#" id="'+tagidentity+'" class="tag">'+tagidentity+'</a><br />');
				}

				//incrementing tag number
				tagnumber++;
			});

			//when hove on the tag show the exact face tagged and also hide when the mouse leaves
			$(document).on('hover', '.tag', function(){
				var $thisid = $(this).attr('id');
				$('.'+$thisid).show();
			}).on('mouseleave','.tag',function(){
				var $thisid = $(this).attr('id');
				$('.'+$thisid).hide();
			});			
		});

The code is self explanatory, just read the comments to know what is happening in there. To understand this script you should be good at jQuery otherwise you may find it difficult.

Here is the HTML part:

<h2>Click on the face to add "tag" after the box appear</h2>
	<div id="img_container">

			<div class="image_block">
				<img src="img/couple.jpg" class="findface" />
				<div class="rightside">
					<h1>Couple 1</h1>
					<div class="tags"></div>
				</div>
			</div>
			<div style="clear:both"></div>

			<div class="image_block">			
				<img src="img/group.jpg" class="findface" />
				<div class="rightside">
					<h1>Group 1</h1>
					<div class="tags"></div>
				</div>
			</div>
			<div style="clear:both"></div>

			<div class="image_block">			
				<img src="img/couple2.jpg" class="findface" />
				<div class="rightside">
					<h1>Couple 2</h1>
					<div class="tags"></div>
				</div>
			</div>
			<div style="clear:both"></div>

			<div class="image_block">
				<img src="img/group2.jpg" class="findface" />
				<div class="rightside">
					<h1>Group 2</h1>
					<div class="tags"></div>
				</div>
			</div>

	</div>

This script doesn’t use any database or server side script to store the tags, this is just a demo of tagging using only jQuery. But the face detection script works only if you open using a server. It could be Apache or any other server.

Basically, if you see the HTML part, it has four DIVs and four images. Once the page loaded on the browser when you move your mouse on any of the photo, JavaScript calls the Face Detection script and within a few seconds it will detect the faces and shows white boxes around the faces.

To add a tag, you have click the white box around the face, a tag will be added at the side of the photo. If you hover on the tag the exact tagged face will be shown.

You can see the demo or download the code: