Face detection using Javascript and OpenCV

Hello, we will study how to detect faces from images using conventional Javascript, HTML Canvas and OpenCV libraries.

Let's look at some examples first, and then we'll continue to write code and explain

If you need to view the complete code base, just get my github repository
GitHub - rajeshpachaikani/face-detection-opencv-js: Simple demonstration of utilising OpenCV.js for face recognitionSimple demonstration of utilising OpenCV.js for face recognition - GitHub - rajeshpachaikani/face-detection-opencv-js: Simple demonstration of utilising OpenCV.js for face recognitionhttps://github.com/rajeshpachaikani/face-detection-opencv-js GitHub - reactcodes/face-detection-javascript-opencv: Multiface detection using Javascript and OpenCVMultiface detection using Javascript and OpenCV. Contribute to reactcodes/face-detection-javascript-opencv development by creating an account on GitHub.https://github.com/reactcodes/face-detection-javascript-opencv

If you have not finished setting up opencv, please visit https://docs.opencv.org/3.4 .0/d4/da1/tutorial_js_setup.html

Now let's look at the code:
I used an HTML template with my sample img container, and then I had two HTML canvases in different div's

<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've added an apply button, click the Apply button, and I'm using to load my img src into the canvas

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'll add the rest of the code to the setUpApplyButton function. What I've done so far is

1. Display the original code in the img tag
2. Load the opencv library onload of the application
3. Click apply to load the same img src into the canvas with id 'imageInit'

Visit opencv/haarcascade_frontalface_default.xml at master · opencv/opencv · GitHub

To get the face xml file. Once downloaded into our own project folder, this will allow us to load the file now using opencv js to detect the face

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 everything is normal and we are ready to cascade

Now we will simply read the data from the imageinit canvas on which we loaded the image 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 available faces in the image

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

Now the variable faces contains all the detected faces arrays, 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 let's load the final result into the results canvas and clear the variables used

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

Thank you for your valuable time and hope to be of help to you. Please share your feedback in the comments below.

Keywords: Javascript OpenCV

Added by nova912 on Sat, 22 Jan 2022 02:06:37 +0200

Programming VIP

Face detection using Javascript and OpenCV

Popular Keywords