Face Detection with jQuery

One face detection library I found is Face Detection through Jay Salvat and Liu Liu. that is a widespread jQuery plugin that gets a photograph and returns an array of coordinates of faces discovered in the photographlet’s see the way to use it!


Four JS files are required for this jQuery plugin:

<!-- send in the clowns -->
<script src="jquery-1.4.3.min.js"></script>

<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

The face detection plugin wraps functionality inside the first two JavaScript documents and returns an array of gadgets which represent the coordinates of the faces in the photograph (if any are observed). An instance would be:

var coords = jQuery("#myImage").faceDetection();
/* Returns:
		x: 525
		y: 435,
		width: 144,
		height: 144,
		positionX: 532.6353328125226,
		positionY: 443.240976080536,
		offsetX: 532.6353328125226,
		offsetY: 443.240976080536,
		confidence: 12.93120119,
		neighbour: undefined,

You may also add event callbacks to every call:

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	error: function() {
		console.warn("Could not process image");

It’s up to you what you’d like to do when the faces have been found. You could add a square around the person’s face:

jQuery("img").each(function() {
	var img = this;
	// Get faces cooridnates
	var coordinates = jQuery(img).faceDetection();
	// Make boxes if faces are found
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("<div>", {
				css: {
					position: "absolute",
					left: coord.positionX + 5 + "px",
					top: coord.positionY + 5 + "px",
					width: coord.width + "px",
					height: coord.height + "px",
					border: "3px solid white"


Please follow and like us:

Leave a Comment

Your email address will not be published. Required fields are marked *