In this tutorial I will show you how to create a Facebook type of face detection and tagging system using JavaScript. There are many other sites which have auto face detection built in. Let’s get started
Loading JavaScript Face Detection Library
We will use Face Detection JavaScript library to find the coordinates and size of the faces in an image.
Facebook and other major sites use then own written library but in our case we can use this library as this is open source and popular too.
Here is the code to load the library and its prerequisites i.e, jQuery in an web page
<html>
<head>
<title>Facebook Detection using JavaScript</title>
<!-- Include jQuery and Face Detection Library -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.rawgit.com/jaysalvat/jquery.facedetection/master/dist/jquery.facedetection.min.js"></script>
</head>
<body>
</body>
</html>
This library returns the coordinates and size of the faces relative to the actual dimension of the image not the CSS dimension. Therefore we need to generate different sizes of an image on different viewport sizes so that we can get the correct dimensions & coordinates of the faces in an image across various devices/viewport.
Resizing Image by keeping Aspect Ratio using PHP
We need to create a PHP script which can generate different dimensions of the same image without changing aspect ratio. This is useful to create a responsive face detection system as we discussed above.
We can achieve this using Easy Resize Image PHP library.
Create a file named “image.php” and put the below code in it. Make sure you have the library extracted in the same directory as this file exists.
include "resizeImage.class.php";
$container_width = $_GET["container"];
$image_name = $_GET["name"];
list($width, $height) = getimagesize($image_name);
$new_width = 0;
if($container_width >= $width)
{
$new_width = $width;
}
else
{
$new_width = $container_width;
}
$resizeimage = new resizeImage;
$image = $resizeimage -> process($image_name, $new_width);
header("Content-type:image/jpeg");
imageJpeg($image);
imageDestroy($image);
?>
Here the script takes a image path and width of the image container on web page. If image container width is greater than equal to the actual width of the image then we return the image without changing its dimension. Otherwise we make the width of the image same as the container width.
Finding Faces in an Image using Face Detection Library
JavaScript Face Detection library provides an very easy interface to detect faces in an image. Its the most accurate JavaScript library at present.
Here is the code to find coordinates and sizes of faces in an image.
{
$("#" + id).faceDetection({
complete: function(faces){
var count = faces.length;
for(var iii = 0; iii < count; iii++){
var x = faces[iii].offsetX;
var y = faces[iii].offsetY;
var height = faces[iii].height;
var width = faces[iii].width;
}
}
});
}
To call this function you need to provide id of an <img /> tag. Make sure you call this function of an <img /> after its loaded. Otherwise you will get error.
Creating a Facebook Style Face Detection and Photo Tagging System
Hers is the code to create a Facebook Style Face Detection and Photo Tagging system.
<html>
<head>
<title>Facebook Detection using JavaScript</title>
<!-- Include jQuery and Face Detection Library -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.rawgit.com/jaysalvat/jquery.facedetection/master/dist/jquery.facedetection.min.js"></script>
<style type="text/css">
#photo
{
position: relative;
width: 100%;
}
.box
{
position: absolute;
display: inline-block;
z-index: 999;
}
.box input
{
visibility: hidden;
max-width: 95%;
position: relative;
}
.box:hover
{
border-width: 4px;
border-color: grey;
border-style: solid;
}
.box:hover input
{
visibility: visible;
}
#picture1
{
max-width: 100%;
}
</style>
</head>
<body>
<div id="photo">
</div>
<!-- Here is the datalist is predefined. But in real site it will be generated dynamically -->
<datalist id="players">
<option value="Sanchez">
<option value="Wenger">
<option value="Walcott">
<option value="Ozil">
</datalist>
<!-- Here "picture1" can be the unique id of an image. -->
<button onclick="load_picture('picture1', 'arsenal.jpeg')">Load Arsenal Image</button>
<script>
function load_picture(id, filename)
{
//Here we are finding the image container width and then loading the image accordingly.
var width_container = document.getElementById("photo").offsetWidth;
document.getElementById("photo").innerHTML = document.getElementById("photo").innerHTML + "<img src='' id='" + id + "' />";
document.getElementById(id).setAttribute("src", "image.php?name=" + filename + "&container=" + width_container);
document.getElementById(id).onload = function(){
face_detection(id);
}
}
function face_detection(id)
{
$("#" + id).faceDetection({
complete: function(faces){
var count = faces.length;
for(var iii = 0; iii < count; iii++){
var x = faces[iii].offsetX;
var y = faces[iii].offsetY;
var height = faces[iii].height;
var width = faces[iii].width;
var input_id = iii.toString() + "_input"
var input_height = height + 20;
//Here you can also add some event listener to detect "Enter Key" click so that you can save the name tagged. And also if the tagging is already done then you can add a "value" attribute and assign the name
var input = "<input id='box" + input_id + "' list='players' style='top:" + height + "px'>";
var box = "<a class='box' id='box" + iii + "' style='left:" + x + "px; top: " + y + "px; height: " + input_height + "px; width:" + width + "px'>"+input+"</a>";
document.getElementById("photo").innerHTML = document.getElementById("photo").innerHTML + box;
}
}
});
}
</script>
</body>
</html>
Here we are calculating the container width dynamically using JavaScript. And then loading an image relative to the width of the container. We are initializing the Face detection library once the image is completely loaded.
Conclusion
I provide code snippet on how to detect faces, generate same image of different dimensions using PHP, calculate image container width dynamically and how to draw rectangles & input boxes on the image to provide tagging functionality.
