Client-side Face detection jQuery Plugin

Face detection is a computer technology that determines the locations and sizes of human faces in arbitrary (digital) images. It detects facial features and ignores anything else, such as buildings, trees and bodies.
Now we have ability to implement this feature on client-side by using jQuery plugin which detects faces in pictures and returns theirs coords. This plugin uses an algorithm by Liu Liu.


How to install

Includes

<script src="http://code.jquery.com/jquery-1.4.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>

Image

<img decoding="async" id="myPicture" src="img/face.jpg">

And now we call script for the image ID “myPicture”

<script>
    $(function() {
        var coords = $('#myPicture').faceDetection();
        console.log(coords);    
    });
</script>

Script returns an array with found faces object:

  • x: Y coord of the face
  • y: Y coord of the face
  • width: Width of the face
  • height: Height of the face
  • positionX: X position relative to the document
  • positionY: Y position relative to the document
  • offsetX: X position relative to the offset parent
  • offsetY: Y position relative to the offset parent
  • confidence: Level of confidence

Download Face detection Plugin
View Demo for Face detection Plugin