JavaScript 人脸识别技术

我一直对人工智能识别技术非常感兴趣，因为我无法想象这究竟是一种什么样的算法，什么样的分析过程。无论是声音识别、人脸识别或其它种识别，人们的外貌、说话的方式都是如此不同，一种图片你可以用不同的方式、从不同的角度拍摄，我不能理解这些识别技术是如何做到的。因为之前已经介绍了JavaScript裸体识别技术，还有个叫做“面具”的游戏也使用了这种识别技术，我想对于脸部识别技术也应该研究一下。Facebook使用了这种技术，在手势控制中也能用到它，所以，你网站上也会有应用的地方。 

我找到的一个可以用于人脸识别的JavaScript程序包是Face Detection，它是由Jay Salvat和Liu Liu开发的。它是一个标准的jQuery插件，通过对提供的图片进行分析，返回所有找到的脸部图像的坐标。下面我们来看看它是如何使用的！ 

观看演示：http://www.webhek.com/demo/face-detection/ 

jQuery.faceDetection 

使用Face Detection这个jQuery plugin，你需要引入四个js文件： 

Javascript代码 

1. <script src="jquery-1.4.3.min.js"></script>  
2.   
3. <!-- mas js -->  
4. <script src="facedetection/ccv.js"></script>  
5. <script src="facedetection/face.js"></script>  
6. <script src="jquery.facedetection.js"></script>  

这个脸部识别插件的头两个文件里是它的各种功能性程序，通过它们能得到一个数组对象，这些对象里存储的就是图片里的脸部坐标信息。下面是一个例子： 

Javascript代码 

1. var coords = jQuery("#myImage").faceDetection();  
2. /* 返回： 
3.     { 
4.         x: 525 
5.         y: 435, 
6.         width: 144, 
7.         height: 144, 
8.         positionX: 532.6353328125226, 
9.         positionY: 443.240976080536, 
10.         offsetX: 532.6353328125226, 
11.         offsetY: 443.240976080536, 
12.         confidence: 12.93120119, 
13.         neighbour: undefined, 
14.     } 
15. */  

你还可以在检测方法上加入事件回调函数： 

Javascript代码 

1. var coords = jQuery("#myImage").faceDetection({  
2.     complete: function(image, coords) {  
3.         // Do something  
4.     },  
5.     error: function() {  
6.         console.warn("无法分析图片");  
7.     }  
8. });  

对于识别出的脸部信息，你可以做任何的处理东西。你可以在图片中脸部的位置画出框线： 

Javascript代码 

1. jQuery("img").each(function() {  
2.     var img = this;  
3.     // 获取脸部坐标  
4.     var coordinates = jQuery(img).faceDetection();  
5.     // 在脸上画出框线  
6.     if(coordinates.length) {  
7.         coordinates.forEach(function(coord) {  
8.             jQuery("<div&gt", {  
9.                 css: {  
10.                     position: "absolute",  
11.                     left: coord.positionX + 5 + "px",  
12.                     top: coord.positionY + 5 + "px",  
13.                     width: coord.width + "px",  
14.                     height: coord.height + "px",  
15.                     border: "3px solid white"  
16.                 }  
17.             }).appendTo(img.parentNode);  
18.         });  
19.     }  
20. });  

这很简单，当然你可以做复杂的处理，比如说提取出来。 

观看演示：http://www.webhek.com/demo/face-detection/ 

我用了各种图片进行脸部识别尝试，正如我预想到的，结果并不是很完美。但不管怎样，还是相当不错的。这是一个很简单的脚本技术，而且没有任何技术是十全十美的。这个脸部识别插件并不具有脸部比较功能，你需要用其它方法并提供面部特征信息实现此功能。总之，相当不错，强烈建议你试一下。