Blog Post Icon

Detecting faces in your images with PHP , Javascript and jQuery


In some scenarios with web application development it may be necessary to be able to detect the facial features of a photo. For example an application that detects how many people are in a picture, or perhaps an app that modifies the faces of the people in a photo.

Whether you’re making a mobile app or a web application that does this, there are many methods to use. There is 3rd party API services such as Face Recognition API.

In our scenario we wanted to build an interface where images could be uploaded via a POST and the X and Y coordinates of the face, eyes nose and mouth regions plotted or returned as a json response. This way if you wanted to build a mobile and web application, they could both use the detection service to return the plot points in a centralized way.

We decided to test the PHP Facedetect extension

git clone
cd PHP-Facedetect
make && make install
echo "" >> /etc/php.ini
apachectl graceful

Once installed and activated in your php.ini , you can start using the face detection functions. Basically how it works is you pass the image path and an accompanying XML document containing a number of algorithms for detecting the areas of the face (see OpenCV library).

What you might want to do is utilize the detection library to identify a few core things, namely the number of people that are detected in the picture, including the different parts of each found face.

$total = face_count($path . '/file.jpg',$path . '/haarcascade_frontalface_alt.xml');

The $total variable will contain an integer that represents the number of people detected in a picture. You can use this number as a core condition for subsequent processing, or you can ignore it. Assuming, for simplicity’s sake, that there is only one person in the photo, you can do subsequent facial feature detections :

$face_coord = face_detect($path . '/file.jpg',$path . '/haarcascade_frontalface_alt.xml');
$eye_coord = face_detect($path . '/file.jpg',$path . '/haarcascade_mcs_eyepair_small.xml');
$mouth_coord = face_detect($path . '/file.jpg',$path . '/Mouth.xml');
$nose_coord = face_detect($path . '/file.jpg',$path . '/haarcascade_mcs_nose.xml');

One of the above variables, when detection is completed, will contain an array of coordinates. In the image at the top of this post, the mouth coordinates will be represented by a series of X & Y axis coordinates as well as W (width) and H (height) variables do determine the content area of the detected face point. In the specific example of the image at the top of this post, the mouth area is represented by the following coordinates :

Array ( [0] => Array ( [x] => 213 [y] => 351 [w] => 106 [h] => 64 ) [1] => Array ( [x] => 52 [y] => 375 [w] => 71 [h] => 43 ) [2] => Array ( [x] => 274 [y] => 232 [w] => 98 [h] => 59 ) [3] => Array ( [x] => 230 [y] => 321 [w] => 78 [h] => 47 ) [4] => Array ( [x] => 217 [y] => 9 [w] => 98 [h] => 59 ) [5] => Array ( [x] => 134 [y] => 223 [w] => 129 [h] => 78 ) ) 

Well – what do you do with these coordinates? It depends on why you are wanting to do this in the first place! In the context of a web application such as Facebook, the facial recognition is designed to detect faces for the purposes of tagging in uploaded photos. But it has also been recently published that facebook is now detecting who is in your pictures to automatically “pre-tag” your photos for you. Scary isnt it?

If you wanted to have your web application conduct image modifications such as an app that “ages” your photo, you could work with those coordinates and modify the mouth, nose, eyes and face regions of an image separately to dynamically modify an image.

Combining Javascript and jQuery technology with this PHP extension, you could do some fancy dynamic changes to the image in question :

// eyes
foreach ($eye_coord as $arr) {
    echo "var recteye = document.createElement('div');
    recteye.classList.add('recteye'); = 'recteye'; = " . $arr['w'] . " + 'px'; = " . $arr['h'] . " + 'px'; = (img.offsetLeft + " . $arr['x'] . ") + 'px'; = (img.offsetTop + " . $arr['y'] . ") + 'px';";

What are we doing in the above code snippet? Well, while still in PHP, we are outputting jQuery code to append CSS styling in order to create a rectangle region that outlines the recently detected eye area. The CSS classes referenced are very simple, defining a border and color that is then shaped by the dynamically generated variables of X,Y,W,H coordinates / integers.

The recteye class is simply defined as something like this :

.recteye {
        border: 1px solid #a64ceb;
        left: -1000px;
        position: absolute;
        top: -1000px;

Once the code is run against the image, the rectangle is generated over the eye area and you have something similar to the image at the top of this post. Pretty easy , right? šŸ™‚

At Shift8, we cater to all sorts of businesses in and around Toronto from small, medium, large and enterprise projects. We are comfortable adapting to your existing processes and try our best to compliment communication and collaboration to the point where every step of the way is as efficient as possible.

Our projects are typically broken into 5 or 6 key “milestones” which focus heavily on the design collaboration in the early stages. We mock-up any interactive or unique page within your new website so that you get a clear picture of exactly how your design vision will be translated into a functional website.

Using tools like Basecamp and Redpen, we try to make the process simple yet fun and effective. We will revise your vision as many times as necessary until you are 100% happy, before moving to the functional, content integration and development phases of the project.

For the projects that are more development heavy, we make sure a considerable amount of effort is spent in the preliminary stages of project planning. We strongly believe that full transparency with a project development plan ensures that expectations are met on both sides between us and the client. We want to ensure that the project is broken into intelligent phases with accurate budgetary and timeline breakdowns.

Approved design mock-ups get translated into a browse-ready project site where we revise again and again until you are satisfied. Client satisfaction is our lifeblood and main motivation. We aren’t happy until you are.

Need Web Design?

Fill out the form to get a free consultation.

shift8 web toronto – 416-479-0685
203A-116 geary ave. toronto, on M6H 4H1, Canada
Ā© 2024. All Rights Reserved by Star Dot Hosting Inc.

contact us
phone: 416-479-0685
toll free: 1-866-932-9083 (press 1)

Shift8 Logo