Posts Tagged mozilla firefox
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Facebook like jQuery face recognition tutorial and demo
Posted by Praveen Gowda I V in Facebook, Jquery, PHP, Web Design on August 11, 2011
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.
In this tutorial i will show you how to detect faces in a photo.
Below you can download the Source Code, or have a look at the Live Demo
|
DOWNLOAD |
LIVE DEMO |
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
<!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
Next week watch out for another interesting tutorial.
Stay updated with our blog by
Subscribe to RSS feeds
Subscribe via email
Subscribe via SMSIf you have any problems using the downloaded files, then leave a comment below.
Want more improvisations on this script, or want to request a new tutorial, then please Contact me right-away.
I promise to respond to everyone who contacts asking for support or new tutorials.
Recent Comments