技术特点
Tracking.js 是使用 JS 封装的一个框架，使用起来需要自己配置许多的东西，略显复杂。
JqueryFaceDetection 是使用 JQuery 封装的框架，只留下一个接口，比较方便。
使用说明
如何下载 JS 文件我就不说了，可以直接百度。
1、Tracking.js
Tracking.js 需要先引入 tracking-min.js，然后根据你的需求在选择性的引入 eye-min.js，face-min.js，mouth-min.js。
// 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'; }; };
2、JqueryFaceDetection
JqueryFaceDetection 是使用 JQuery 封装的，所以需要引入 JQuery，接着再引入 jquery.facedetection.js就可以了。总的来说，引入的文件比较少。
引入 JQuery 教程：Vue.js - Vue 项目引入 JQuery 框架_牧码的博客-CSDN博客_vue.js引入jquery
$(function () { $('#img').faceDetection({ complete: function (faces) { if (faces.length == 0) { //说明没有检测到人脸 alert("无人脸") } else { for (var i in faces) { draw(faces[i].x, faces[i].y, faces[i].width, faces[i].height); } } }, error: function (code, message) { alert("complete回调函数出错") } }) })
