Techumber
Home Blog Work

Facebook Like Automatic Face Detection Using Jquery

Published on May 19, 2013

I really wonder when I first time read about it. I have no idea that jquery can do it. But yes. We have amazing plug-in to do it. Facebook using similar kind of code to detect faces on image. In this post I am gonna show you how this plug in works. In this first we  upload an image and click a star button. It will automatically Detect Face in your Image. Another great thing about this plug in is, It can detect multiple faces.

Demo

Download

This plug in is created by Jay Salvat. You can download this plug-in from github page here

index.php

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>
<head>
<body>
<section class="contant">
<?php
if($image){
echo '<a href="#" id="start">Click Here!</a> <img src="'.$image.'" id="myimg">';
}
?>
<?php
//if any error while uploading
if($err)
{
echo '<div class="alert alert-error">'.$err.'</div>';
}
?>
<form id="imgcrop" method="post" enctype="multipart/form-data">
Upload image: <input type="file" name="img" id="img" />
<input type="hidden" name="imgName" id="imgName" value="<?php echo($imgname) ?>" />
<button name="submit">Submit</button>
</form>
</section>
</body>
</html>

Here we adding all required plugin files.

PHP Image Upload Script

<?php
//error variable init
$err="";
$path = "../uploads/";
//alled image format will be used for filter
$allowed_formats = array("jpg", "png", "gif", "bmp");
$imgname = $_FILES['img']['name'];
$tmpname = $_FILES['img']['tmp_name'];
$size = $_FILES['img']['size'];
if($imgname){
list($name, $ext) = explode(".", $imgname);
if(in_array($ext,$allowed_formats) && $size<(1024*1024))
{
if($ext=="jpg" || $ext=="jpeg" )
{
$src = imagecreatefromjpeg($tmpname);
}
else if($ext=="png")
{
$src = imagecreatefrompng($uploadedfile);
}
else
{
$src = imagecreatefromgif($uploadedfile);
}

list($width,$height)=getimagesize($tmpname);

if($width > 500){
$newwidth=500;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,
$width,$height);

$image = $path.$imgname;

imagejpeg($tmp,$path.$imgname,100);
move_uploaded_file($image,$path.$imgname);

}
else{
//moveing uploaded image to uploads dir
if(move_uploaded_file($tmpname,$path.$imgname)){
//uploaded image
$image="../uploads/".$imgname;
}
else
{
$err="<strong>Oh snap!</strong>failed";
}
}

}
else{
$err="<strong>Oh snap!</strong>Invalid file formats..!";
}
}
else{
$err="<strong>Oh snap!</strong>Please select image..!";
}
}
?>

Add this code just above the Tag.

Jquery Code

$(function() {
  $('#start').click(function() {
    var $this = $(this);
    $this.text('Please Wait....');
    var coords = $('#myimg').faceDetection({
      complete: function() {
        $this.text('Done! White box on your face');
      },
      error: function(img, code, message) {
        $this.text('error!');
        alert('Error: ' + 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('.contant');
    }
  });
  return false;
});

Add this code just above the closing body tag(). Here we invoking facedetect Plug in.

CSS

.contant {
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 500px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
}
input[type='file'],
button {
  padding: 5px 20px;
  background: #333;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.face {
  border: 2px solid #fff;
}
#start {
  color: green;
  font-weight: bolder;
}

Conclusion:

This is really amazing jquery plug in. You can use in your web app very easily. It is so easy to integrate. Only thing to remember it you need to use web server to run this plug in. You can’t invoke it from file system.