jQuery - Face Detect from Image

1568 views 2 months ago jQuery

In this article, I will share with you how to detect face from an image using jQuery. Face detection is a common feature in most digital cameras today; the white or red square that pops around someone's face when we are focusing the camera on that person. Face detection algorithms enable the software to pinpoint the locations and sizes of human faces in digital images, whatever the surrounding objects may be.

Face-Detection is a jQuery plugin that enables you to detect human faces in images. Besides the crucial algorithm that does the main work, it uses the HTML5 Canvas element to grab the image data. An immediate application I thought of was to use it to automatically crop faces from pictures to be used as profile photos.

Output :

Example :

<!DOCTYPE html>
<html>
<head>
	<title>Face Detectioin - LaravelCode</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="facedetection.js"></script>
	<style type="text/css">
		 .picture-container {
            position: relative;
            width: 600px;
            height: auto;
            margin: 20px auto;
            border: 10px solid #fff;
            box-shadow: 0 5px 5px #000;
        }
        .picture {
            display: block;
            width: 100%;
            height: auto;
        }
		.face {
            position: absolute;
            border: 2px solid #FFF;
        }
	</style>
</head>
<body>
	<img id="picture" src="faces.jpg">
	<br />
	<a href="#" id="try-it">Click Here...</a>
	<script>
	    $('#try-it').click(function (e) {
            e.preventDefault();
            $('.face').remove();
            $('#picture').faceDetection({
                complete: function (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);
                }
            });
        });
	</script>
</body>
</html>

i hope you like this article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com