QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Facebook Style Face Detection and Tagging with JavaScript

Facebook Style Face Detection and Tagging with JavaScript

facebook-image-detection

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

<!doctype html>
<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.

<?php
    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.

            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;
                        }
                    }
                });
            }

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.

View Demo

<!doctype html>
<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.

Jan 29, 2015Narayan Prusty
Find Internet Type using HTML5 Network Information APIJavaScript Limit Function Call Rate
Comments: 1
  1. Joel Fioti
    5 years ago

    awesome tutorials, i like it

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Loading JavaScript Face Detection Library
  • Resizing Image by keeping Aspect Ratio using PHP
  • Finding Faces in an Image using Face Detection Library
  • Creating a Facebook Style Face Detection and Photo Tagging System
  • Conclusion
Related Articles
  • Creating Windows Metro Style Layout for Websites
  • Adding Custom Content to Printed Web Pages
  • Lazy Loading Images And Its SEO Impact
  • Media Queries Tutorial
  • Writing Vendor Prefix Free CSS Code
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license