这篇文章主要就介绍两种前端的人脸识别框架(Tracking.jsJqueryFaceDetection

技术特点

Tracking.js是使用js封装的一个框架,使用起来需要自己配置许多的东西,略显复杂

JqueryFaceDetection是使用jquery封装的框架,只留下一个接口,比较方便

使用说明

如何下载js文件我就不说了,可以直接百度

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

  

JqueryFaceDetection

JqueryFaceDetection是使用jquery封装的,所以需要引入jquery,接着再引入jquery.facedetection.js就可以了。总的来说,引入的文件比较少。

$(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回调函数出错")
}
})
})

  

以上是js部分的代码。

接着只需要在你的页面中加一张图片即可

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

验证结果

Tracking.Js

其实还有一张我的自拍照(识别不出来),我就不上传了。总的来说,我不推荐这个框架。

JqueryFaceDetection

看起来识别率似乎是比Tracking.js低一些,但是至少猩猩的脸是识别不出来的,而且强光图和半张脸的阴暗图识别不出来应该是可以接受的。推荐使用

前端人脸识别框架Tracking.js与JqueryFaceDetection的更多相关文章

  1. openFace 人脸识别框架测试

    openface  人脸识别框架  但个人感觉精度还是很一般 openface的githup文档地址:http://cmusatyalab.github.io/openface/ openface的安 ...

  2. 从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js

    从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js /************************************************************* ...

  3. openface人脸识别框架

    openface的githup文档地址:http://cmusatyalab.github.io/openface/ openface的安装: 官方推荐用docker来安装openface,这样方便快 ...

  4. tracking.js实现前端人脸识别

    1.下载https://trackingjs.com/ 2.运行例子 纳总一下 发现效果 里面的代码为 <!doctype html><html><head> &l ...

  5. face-api.js 前端人脸识别,人脸检测,登录认证

    1.参考face-api.js https://github.com/justadudewhohacks/face-api.js#face-api.js-for-the-browser

  6. face_recognition人脸识别框架

    一.环境搭建 1.系统环境 Ubuntu 17.04 Python 2.7.14 pycharm 开发工具 2.开发环境,安装各种系统包 人脸检测基于dlib,dlib依赖Boost和cmake $ ...

  7. 安排上了!PC人脸识别登录,出乎意料的简单

    本文收录在个人博客:www.chengxy-nds.top,技术资源共享. 之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了 ...

  8. 第三十七节、人脸检测MTCNN和人脸识别Facenet(附源码)

    在说到人脸检测我们首先会想到利用Harr特征提取和Adaboost分类器进行人脸检测(有兴趣的可以去一看这篇博客第九节.人脸检测之Haar分类器),其检测效果也是不错的,但是目前人脸检测的应用场景逐渐 ...

  9. 机器学习实战:用nodejs实现人脸识别

    机器学习实战:用nodejs实现人脸识别   在本文中,我将向你展示如何使用face-recognition.js执行可靠的人脸检测和识别 . 我曾经试图找一个能够精确识别人脸的Node.js库,但是 ...

随机推荐

  1. 修改sudoers权限之后无法sudo的最简单解决方法

    网上百度一下进入recovery模式或是单用户模式仍然修改不了sudoers的权限, 后来终于在网上找到了一种最简单的方法,那就是 pkexec chmod 0440 /etc/sudoers

  2. less-符号之逗号,空格,父级选择器

    Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 ...

  3. mysqldump迁移说明

    使用mysqldump导出数据, 数据包含单行insert,带字段值 #使用mysqldump备份数据到文件, 主要在每个分片的主上面进行备份,确保数据是最新的. mysqldump -h192. - ...

  4. 巨蟒python全栈开发flask7 语音识别升级版&&mongoDB

    1.web简陋版玩具 首先,复制上一节课的内容,将其中的语音文件删除掉, 放入三个文件,然后,我们需要在app写入下面的内容 下图是需要修改的地方: Recorder_ok.js是一个web录音的工具 ...

  5. Exchange Powershell:ForwardingAddress&InboxRule

    查询在邮箱上设置的转发功能: Get-Mailbox -server MX01 -Filter {ForwardingAddress -like '*'} | Select-Object Name, ...

  6. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

  7. 更新设置api

    8.8 更新设置 API Elasticsearch允许在elasticsearch.yml文件中指定各种参数来调优.但你应该把这个文件当做 默认设置,可以在运行时通过Elasticsearch RE ...

  8. TGI指数

    TGI指数 目标人群中国具有某一特征的群体占比/总体中具有相同特征的群体的占比*标准数100

  9. 第04章—整合Mybatis

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  10. jQuery EasyUI 简介

    简介 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 特点: ①easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. ②easyui 提供建 ...