Face Detection with Javascript and OpenCV

Hello everyone, we are going to look at how to detect faces from images using regular Javascript, HTML Canvas and OpenCV library.

Let's look at some examples first then we will proceed to code and it's explanation

Single Face detection

Demo

MultiFace

Demo













If you need to see the full codebase just got my github repo https://github.com/reactcodes/face-detection-javascript-opencv

If you have not done opencv setup kindly visit https://docs.opencv.org/3.4.0/d4/da1/tutorial_js_setup.html

Now lets understand the code :
I have taken a HTML template where I have my Sample img container and then I have 2 html canvas in a different div

<div class="container">
    <div id="background" class="o_image">
            <img id="sample" src="sample_2.jpg" alt="facedetection" />
            <span>©reactcodes blog</span>
    </div>
    <div class="p_image">
            <canvas id="imageInit"></canvas>
            <canvas id="imageResult"></canvas>
    </div>
</div>

Now I have added an apply button, on click of apply button I am loading my img src into canvas using

const utils = new Utils('errorMessage');
const imageUsed = document.getElementById('sample').getAttribute('src')
const applyButton =document.getElementById('apply')applyButton.setAttribute('disabled','true')
applyButton.onclick = setUpApplyButtonutils.loadOpenCv(() => {    
   setTimeout(function () {         
      applyButton.removeAttribute('disabled');    
},500)});
   const setUpApplyButton = function () {      
   utils.loadImageToCanvas(imageUsed, 'imageInit')
}

Now I will add my rest of codes into setUpApplyButton function, till now what ever I have done is

1. Showing original in img tag
2. Loading opencv library onload of application
3. Clicking on apply loading same img src into canvas with id 'imageInit'

Visit https://github.com/opencv/opencv/blob/master/data/haarcascades/haarcascade_frontalface_default.xml to get the face xml file which will allow us to detect the face with opencv js

now once downloaded into project folder we have to load that file

let faceCascadeFile = 'haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
        console.log('cascade ready to load.');
    }); 
}

So now in your browser console if it shows 'cascade ready' then all are going ok, we have the cascade ready

Now we will simply read the data from imadeinit canvas, on which we loaded image earlier, and will create instances for ReactVector and CascadeClassifier

let src = cv.imread('imageInit');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
faceCascade.load(faceCascadeFile);  
// Imp ::: In this line we are loading the xml we downloaded for facedata
let msize = new cv.Size(0, 0);

Now let's detect the faces available in the image

faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.dir(faceCascadeFile)

Now the variable faces contains all detected faces array, so we run a loop and mark the detected areas

console.log(faces)
for (let i = 0; i < faces.size(); ++i) {
    let roiGray = gray.roi(faces.get(i));
    let roiSrc = src.roi(faces.get(i));
    let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
    let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
                                        faces.get(i).y + faces.get(i).height);
    cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
    roiGray.delete(); roiSrc.delete();
}

Now lets load the final result into result canvas, and clear used variables

cv.imshow('imageResult', src);
src.delete(); gray.delete(); faceCascade.delete();
document.getElementById('imageInit').style.display = "none"

Thanks for your time, hope this helps, please share your feedback by commenting below

Image Credits :

For performing the experiments I have used some images randomly downloaded from internet, here are the sources

https://www.jiosaavn.com/artist/shah-rukh-khan-songs/tkXMVGTn-A0_
https://c.saavncdn.com/artists/Shah_Rukh_Khan.jpg
https://etcanada.com/photos/120442/take-two-celebs-who-look-just-like-another-celeb/#image-292405