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.
Whenever 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.
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.
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
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
Comments
Post a Comment