Face detection (Face detection) with jQuery

See example Download source

Face detection for application creation has significant meaning. Being able to use a technology like this on a website through a JavaScript plugin can be useful on many occasions; for example, you can take an image from the device's camera and then verify if there is a face in the image.

Face detection has been a very striking feature in web applications for years. Being able to analyze an image and obtain the exact coordinates of faces opens the door to validations, automatic cropping, person tagging, or simple visual tests.

When I started working with facial detection in the browser, around 2013, doing it solely with JavaScript and jQuery already seemed almost magic. Today the context has changed quite a bit, but it is still interesting to understand how this classic approach works, what its real limits are, and in what cases it still makes sense to use it.

In this article, I explain how face detection works with jQuery, how to use the jquery.facedetection plugin, what it exactly returns, and, above all, what you should consider in 2026 before using it in a real project.

What is facial detection in web applications?

Facial detection (face detection) is the process by which human faces are identified within an image, video, or camera stream. It is important to clarify something from the beginning: detecting is not recognizing.

• Detection: locate faces (coordinates, size, position).
• Recognition: identify a specific person.

The jQuery plugin we are talking about here only detects faces, returning positions and dimensions, without knowing who the person is.

In my first tests with these types of plugins, the most useful thing was not absolute accuracy, but being able to answer simple questions like: is there a face in this image? How many are there? Where are they?

The jquery.facedetection plugin: what it does and how it works

jquery.facedetection is a plugin created by Jay Salvat that allows detecting faces in images, videos, or canvas elements using client-side JavaScript.

Although it is often presented as “without Canvas”, the reality is that internally it does use the HTML5 Canvas API to analyze the image pixels using getImageData.

How it internally detects faces

The plugin is based on a classic detection algorithm (inspired by Viola–Jones). There is no modern machine learning or neural networks; therefore:

• It works fast
• It is lightweight
• But it fails with angles, shadows, or partially visible faces

In more than one real test, I found images where it detected a non-existent face… and in others, it ignored a fairly clear one.

What data the plugin returns

When executing the faceDetection() method, the plugin returns an array of objects, where each object represents a detected face.

Most important properties:

• x, y: coordinates within the image
• width, height: dimensions of the face
• positionX, positionY: position relative to the document
• scaleX, scaleY: scaling factor
• confidence: detection confidence level

This data is the basis for any subsequent visual manipulation

Installation and basic configuration with jQuery

The FaceDetection plugin allows recognizing faces in images and even videos; its operation is very simple:

Although the code is old, modern browsers still support it, provided two key conditions are met:

• The image must be loaded from a server (not file://)
• The image must allow Canvas access (CORS)

If you don't meet this, the classic error will appear:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D'

Inclusion of libraries

We install the plugin available in the previous link along with a version of jQuery; as we indicated at the beginning, jQuery is necessary for the JavaScript plugin to work:

<script src="jquery.min.js"></script>
<script src="jquery.facedetection.min.js"></script>

We apply the plugin to the image using the faceDetection() method:

$('#picture').faceDetection({
        complete: function (faces) {
            console.log(faces);
        }
});

And that's it, just by invoking the faceDetection() function, you will be able to detect one or more faces in the analyzed image. From here, it is possible to perform many operations on the image with the array (composed of objects) returned upon completing the detection of the face(s); among the most important we have:

A real example of the data it would return when analyzing an image:

[Object, Object, Object, Object]

The analyzed image is composed of four detected faces, where each position of the array (each Object we saw above) corresponds to a face detected in the image or video; by analyzing one of the positions of the array we will see all the attributes that make up the identified face:

[Object, Object, Object, Object]
0: Object
confidence: 9.849374709999992
height: 44.32027794030165
neighbors: 12
offsetX: 902.7123863876474
offsetY: 56.38056916787977
positionX: 250.21238638764734
positionY: 26.380569167879774
scaleX: 0.967741935483871
scaleY: 0.9684813753581661
width: 44.32027794030165
x: 250.21238638764734
y: 26.380569167879774

A simple example to draw boxes around identified faces

We will need an HTML like the following:

<div class="picture-container">
   <img id="picture" class="picture" src="picture.jpg">
</div>

Where we have the image to analyze inside a container.

With this function, we can create a box to enclose the identified face:

$('#picture').faceDetection({
    complete: function (faces) {
        console.log(faces);
        
        for (var i = 0; i < faces.length; i++) {
            $('<div>', {
                'class':'face',
                'css': {
                    'position': 'absolute',
                    'left':     faces[i].x * faces[i].scaleX + 'px',
                    'top':      faces[i].y * faces[i].scaleY + 'px',
                    'width':    faces[i].width  * faces[i].scaleX + 'px',
                    'height':   faces[i].height * faces[i].scaleY + 'px'
                }
            })
            .insertAfter(this);
        }
    },
    error:function (code, message) {
        alert('Error: ' + message);
    }
});

• We indicate the image to analyze with $('#picture').faceDetection.
• We iterate through all identified faces and access their attributes from for (var i = 0; i < faces.length; i++).
• We create a box that we insert inside the image container according to the position of the identified face (faces[i].x and faces[i].y).

Considerations about face recognition with the FaceDetection plugin

Like any algorithm, it can fail; that is, it may not recognize all faces in an image; angle and shadows are factors that influence face recognition in an image:

You must execute the script associated with the plugin within a server; otherwise, it would give the following error:

 Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. 

This is because the plugin uses the Canvas API provided by HTML5 to perform its operations, including the getImageData function to extract image information.

See example Download source

Real limitations of the FaceDetection plugin

This plugin:

• Works well with frontal faces
• Fails with inclinations
• Gets confused with shadows and contrasts

It is not uncommon for it to detect "faces" in objects with similar shapes.

Common problems with Canvas and CORS

Some external images cannot be read by Canvas. In real projects, I had to:

• Download images to the server
• Or use proxies
• Or simply discard this approach

Does it make sense to use jQuery for facial detection in 2025?

When this approach is still valid

Yes, it makes sense if:

• You want a quick demo
• You need something lightweight
• You don't require high precision
• The project already uses jQuery

For simple validations (for example, checking if an image has at least one face), it is still useful.

Modern alternatives based on machine learning

If you need something more serious, today there are much better options:

• face-api.js (on TensorFlow.js)
• Modern detection models in the browser
• Greater precision and facial recognition

Of course, at the cost of:

• More weight
• More complexity
• Longer loading time

Final conclusions

Face detection with jQuery is a technology that performed its function very well, and that can still have a place in specific scenarios. However, it is important to use it judiciously and without unrealistic expectations.

This type of plugin works best as:

• Educational tool
• Prototype
• Basic validation

If your project truly depends on facial detection, nowadays the path clearly goes through modern machine learning-based solutions.