Tracking.js描述

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的api，具有数个方法和事件（足够使用了）。还有一个我觉得不错的功能就是，截取摄像头的图像，对于一些网站用这个功能来设置用户头像也是个很炫的功能。

通过分析tracking.js文件实现多人同时检测人脸并将区域限定范围内的人脸标识出来，并保存为图片格式。注：本地预览请用火狐浏览器，chrome浏览器需要在服务端查看效果

Tracking.js的使用

Tracking.js需要先引入tracking-min.js，然后根据你的需求在选择性的引入eye-min.js,face-min.js,mouth-min.js。

只需要在你的页面中加一张图片即可  ，如下：

<img id="img" src="img/1.jpg"/>

以下是js部分的代码：

<script>
//tracking.ObjectTracker()接受数组参数将你想要标记的对象分类（比如脸部整体、眼睛、鼻子、嘴巴等）。
//setStepSize()规定用来标记的方框的步长。
//我们把要标记的对象和track事件进行绑定，一旦我们要标记的对象完成初始化，就会触发track事件。
//数据（Data）保存在对象数组列表中，其中的值是每一个标记对象的长、宽以及x、y坐标。
window.onload = function () {
    var img = document.getElementById('img');
    var tracker = new tracking.ObjectTracker(['face']); // Based on parameter it will return an array.
//tracker.setStepSize(1.7);
    tracking.track('#img', tracker);
    tracker.on('track', function (event) {
        if (event.data.length === 0) {
            alert("无人脸")
        } else {
            event.data.forEach(function (rect) {
//console.log(event)
            console.log(rect)
            draw(rect.x, rect.y, rect.width, rect.height);
//alert("有人脸")
            });
        }
    });
//画方框
    function draw(x, y, w, h) {
        var rect = document.createElement('div');
        document.querySelector('.imgContainer').appendChild(rect);
        rect.classList.add('rect');
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
        rect.style.left = (img.offsetLeft + x) + 'px';
        rect.style.top = (img.offsetTop + y) + 'px';
    };
};	
</script>

注意：Tracking.js对于暗光、半张脸情况的图片是不容易识别出来的。

说明：具体使用方法可以查看官网，其中：rect.x, rect.y, rect.width, rect.height这四个参数表示左上角的坐标和框出来人脸的大小。

链接: https://www.fly63.com/article/detial/721