聊聊JavaScript人脸识别技术-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

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

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

jQuery.faceDetection

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

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

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

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,
    }
*/

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

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

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

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);
        });
    }
});