Talking about Javascript.
Sometimes I like to play with face detection and blog about it, I already showed you a PHP face detection class and a Flash AS3 face detection and recognition library, now it’s time to give a try to Jay Salvat‘s face detection jquery plugin, based on Liu Liu’s work.
As every face detection algorithm, it’s not perfect and I am showing you some images which are perfectly recognized and some images which aren’t recognized at all.
But most of all, I am showing you how easy is to use this plugin:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.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>
$(document).ready(function() {
$("img").click(function(){
var coords = $(this).faceDetection();
for(i=0;i<coords.length;i++){
$("<div>",{
"class":"facebox",
"css":{
"left":coords[i].positionX+"px",
"top":coords[i].positionY+"px",
"width":coords[i].width+"px",
"height":coords[i].height+"px"
}
}).appendTo("#content");
}
alert("done");
});
});
</script>
<style>
.facebox{
border:4px solid #ff0000;
position:absolute;
}
img{
cursor:pointer;
}
</style>
</head>
<body>
<div id = "content">
<img src="img/01.jpg" />
<img src="img/02.jpg" />
<img src="img/03.jpg" />
<img src="img/04.jpg" />
<img src="img/05.jpg" />
<img src="img/06.jpg" />
<img src="img/07.jpg" />
<img src="img/08.jpg" />
<img src="img/09.jpg" />
<img src="img/10.jpg" />
<img src="img/11.jpg" />
<img src="img/12.jpg" />
</div>
</body>
</html>
And now, some images for you to try. Click on an image to run face detection.
Download the source code with all required libraries.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.