Frontend

Hello everyone, in the previous topic we saw how we can detect single/multiple faces on images. In this topic we are going to see how we can detect human eye on such images Let's look at the result first In case you missed last topic here is the link : https://reactcodes.blogspot.com/2019/11/face-detection-with-javascript-and.html So for detecting eyes we are going to need eye haadcascade data From this  link  you can download that file  Once you have the file ready and you already have setup face detection using my face detection article, we may now load the eye file utils.loadImageToCanvas(imageUsed, 'imageInit') let faceCascadeFile = 'haarcascade_frontalface_default.xml'; let eyeCascadeFile = 'haarcascade_eye.xml'; utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => { utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => { console.log('eye cascade ready'); ...

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 cl...