Skip to main content

Facebook like jQuery face recognition tutorial and demo


Facebook influences our life each and everyday. One of the features which has contributed enormously to make Facebook appealing to even to its average users is Photos.
Facebook like jQuery Face detection in photosWhenever we upload photos to Facebook, Facebook automatically recognizes the faces in the photo and allow you to tag them.
If you ever wondered how to detect faces in photos in your own website, then the answer is very simple, Faces in photos  can be easily detected using a jQuery plugin.
In this tutorial i will show you how to detect faces in a photo.
Face recognition
Below you can download the Source Code, or have a look at the Live Demo
Download Source Code
DOWNLOAD
Live Demo
LIVE DEMO
Important Note
Many users have complained that the Live Demo does not work in Internet Explorer, So I recommend using any other updated versions of the browser like Safari, Mozilla Firefox, Google chrome(Best) or Opera for maximum impact.
For this tutorial we are going to use FaceDetection jQuery plugin which uses an algorithm by Liu Liu
This is what the download file and the live demo contains
  • In the first example you can see the face detection plugin applied to photos on the server
  • In the second example you can upload an image file of your choice and detect faces in the photo you upload.

Something that can let you improve this tutorial is enabling photo tagging after face recognition ( that is exactly what Facebook does), right now this tutorial only shows face recognition, in coming tutorials I will try to show photo tagging as well
Below is the PHP code of the file index.php
Important Note
The following code is just the simplest example as to how to use the plugin, the source code available for download has many more examples and scenarios at which face detection can be used,hence I strongly advise you to download the source code and also have a look at the Live demo.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Facebook like jQuery face recognition demo| Files on server 1 | http://blog.geotitles.com</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="../../js/facedetection/ccv.js"></script>
    <script src="../../js/facedetection/face.js"></script>
    <script src="../../js/jquery.facedetection.js"></script>
    <script>
    $(function() {
        $('#try').click(function() {
            var $this = $(this);
            var coords = $('img').faceDetection({
                complete:function() {
                    $this.text('Done!');
                },
                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('#content');
            }
        });
        return false;
    });
    </script>
    <style>
        .face {
            border:2px solid #FFF;
        }
    </style>
</head>
<body>
<div id="container">
  <div id="header">
        <h3>These are the demos of<a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/"> Facebook like face detection tutorial</a> at GEO WEB STATION Click <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">here</a> to go back to the <a href="http://blog.geotitles.com/2011/08/facebook-like-face-detect/">tutorial</a> to download the demo files</h3>
  </div>
    <div id="content">
        <a href="#" id="try">Detect Faces</a>
        <img src="../../images/faces.jpg" />
    </div>
</div>
</body>
</html>
After downloading the source files open the readme file for installation instructions
Labels:

Comments

Post a Comment

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an Apple iPad interface.
Post a Comment
Read more

30 Free Facebook Timeline Cover Backgrounds

If you really want a good cover for your Facebook Timeline, you have landed on the right page. It’s seen that people have faced problem in finding covers of their choice because of the specific size issue. However, you do not need to look further, as this list presents 30 cool free Facebook Timeline covers for you to sport them on your profile page. The list includes creative, funny, exciting and cool pictures of perfect dimensions to fit your Facebook cover without having you to crop or resize them. Moreover, they are absolutely free to download, so you can instantly put them on your Timeline cover to express numerous moods and inspirations. If you like this article, you might be interested in some of our other articles on  Thumbs Up Symbol,Heart Symbol On Facebook, Facebook Timeline Covers and Facebook Timeline As Used By Brands . Love Calculator What all it takes to result in love? A pretty woman and drinks. Love Calculator This Guy Rocks Let your cover boast about you and tell your
Post a Comment
Read more

PHP File Upload

With PHP, it is possible to upload files to the server. Create an Upload-File Form To allow users to upload files from a form can be very useful. Look at the following HTML form for uploading files: <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> Notice the following about the HTML form above: The enctype attribute of the <form> tag specifies which content-type to use when submitting the form. "multipart/form-data" is used when a form requires binary data, like the contents of a file, to be uploaded The type="file" attribute of the <input> tag specifies that the input sho
Post a Comment
Read more