Frontend

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

Hello everyone, in this article I am going to explain how we can crop an image with irregular rectangular window and correct perspective to get a regular rectangular image frame. Find the final result below : How this cropping and perspective correction is done in this project, the below animation shows Well now lets discuss about the steps I followed to implement this.  I hope you have gone through my crop window making over an image post, if you have't please visit  https://reactcodes.blogspot.com/2019/11/creating-irregular-crop-window-on-image.html   It is important because, that is the first step. A quick summery of that post, I am taking an image in background, I am using d3 to create an svg element which is acting like an crop box, I have added some dragging function to adjust the corner, so that any image portion of any shape can be cropped. After this step, I have setup basic UI git show the output side by side. I have added canvas and us...