Let's talk about JavaScript face recognition technology

I have always been very interested in artificial intelligence recognition technology, because I can’t imagine what kind of algorithm it is and what kind of analysis process it is. Whether it's voice recognition, face recognition or other types of recognition, people's appearance and the way they speak are so different. You can take a picture in different ways and from different angles. I can't understand how these recognition technologies work. Arrived. Because JavaScript nude recognition technology has been introduced before, and a game called “Mask” also uses this recognition technology, I think facial recognition technology should also be studied. Facebook uses this technology, and it can also be used in gesture controls, so there will be a place for it on your website.

One JavaScript package I found that can be used for face recognition is Face Detection, which was developed by Jay Salvat and Liu Liu. It is a standard jQuery plugin that analyzes the provided image and returns the coordinates of all found face images. Let’s see how it is used!

jQuery.faceDetection

To use the Face Detection jQuery plugin, you need to introduce four js files:

<script src="jquery-1.4.3.min.js"></script>

<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

The first two files of this face recognition plugin are Various functional programs, through which you can obtain an array object, which stores the facial coordinate information in the picture. The following is an example:

var coords = jQuery("#myImage").faceDetection();
/* 返回：
	{
		x: 525
		y: 435,
		width: 144,
		height: 144,
		positionX: 532.6353328125226,
		positionY: 443.240976080536,
		offsetX: 532.6353328125226,
		offsetY: 443.240976080536,
		confidence: 12.93120119,
		neighbour: undefined,
	}
*/

You can also add an event callback function to the detection method:

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	},
	error: function() {
		console.warn("无法分析图片");
	}
});

You can do any processing for the recognized facial information. You can draw a frame around the face in the picture:

jQuery("img").each(function() {
	var img = this;
	// 获取脸部坐标
	var coordinates = jQuery(img).faceDetection();
	// 在脸上画出框线
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("<p&gt", {
				css: {
					position: "absolute",
					left: coord.positionX + 5 + "px",
					top: coord.positionY + 5 + "px",
					width: coord.width + "px",
					height: coord.height + "px",
					border: "3px solid white"
				}
			}).appendTo(img.parentNode);
		});
	}
});

This is very simple, of course you can do complex processing, such as extraction.

I used various pictures to try facial recognition, and as I expected, the results were not perfect. But regardless, it's still pretty good. This is a very simple scripting technique, and no technique is perfect. This facial recognition plug-in does not have a face comparison function. You need to use other methods and provide facial feature information to achieve this function. All in all, it's pretty good and I highly recommend you give it a try.

Related learning recommendations: javascript video tutorial

The above is the detailed content of Let's talk about JavaScript face recognition technology. For more information, please follow other related articles on the PHP Chinese website!