前端人脸识别框架Tracking.js与JqueryFaceDetection
这篇文章主要就介绍两种前端的人脸识别框架(Tracking.js和JqueryFaceDetection)
技术特点
Tracking.js是使用js封装的一个框架,使用起来需要自己配置许多的东西,略显复杂
JqueryFaceDetection是使用jquery封装的框架,只留下一个接口,比较方便
使用说明
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的更多相关文章
- openFace 人脸识别框架测试
openface 人脸识别框架 但个人感觉精度还是很一般 openface的githup文档地址:http://cmusatyalab.github.io/openface/ openface的安 ...
- 从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js
从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js /************************************************************* ...
- openface人脸识别框架
openface的githup文档地址:http://cmusatyalab.github.io/openface/ openface的安装: 官方推荐用docker来安装openface,这样方便快 ...
- tracking.js实现前端人脸识别
1.下载https://trackingjs.com/ 2.运行例子 纳总一下 发现效果 里面的代码为 <!doctype html><html><head> &l ...
- face-api.js 前端人脸识别,人脸检测,登录认证
1.参考face-api.js https://github.com/justadudewhohacks/face-api.js#face-api.js-for-the-browser
- face_recognition人脸识别框架
一.环境搭建 1.系统环境 Ubuntu 17.04 Python 2.7.14 pycharm 开发工具 2.开发环境,安装各种系统包 人脸检测基于dlib,dlib依赖Boost和cmake $ ...
- 安排上了!PC人脸识别登录,出乎意料的简单
本文收录在个人博客:www.chengxy-nds.top,技术资源共享. 之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了 ...
- 第三十七节、人脸检测MTCNN和人脸识别Facenet(附源码)
在说到人脸检测我们首先会想到利用Harr特征提取和Adaboost分类器进行人脸检测(有兴趣的可以去一看这篇博客第九节.人脸检测之Haar分类器),其检测效果也是不错的,但是目前人脸检测的应用场景逐渐 ...
- 机器学习实战:用nodejs实现人脸识别
机器学习实战:用nodejs实现人脸识别 在本文中,我将向你展示如何使用face-recognition.js执行可靠的人脸检测和识别 . 我曾经试图找一个能够精确识别人脸的Node.js库,但是 ...
随机推荐
- 修改sudoers权限之后无法sudo的最简单解决方法
网上百度一下进入recovery模式或是单用户模式仍然修改不了sudoers的权限, 后来终于在网上找到了一种最简单的方法,那就是 pkexec chmod 0440 /etc/sudoers
- less-符号之逗号,空格,父级选择器
Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 ...
- mysqldump迁移说明
使用mysqldump导出数据, 数据包含单行insert,带字段值 #使用mysqldump备份数据到文件, 主要在每个分片的主上面进行备份,确保数据是最新的. mysqldump -h192. - ...
- 巨蟒python全栈开发flask7 语音识别升级版&&mongoDB
1.web简陋版玩具 首先,复制上一节课的内容,将其中的语音文件删除掉, 放入三个文件,然后,我们需要在app写入下面的内容 下图是需要修改的地方: Recorder_ok.js是一个web录音的工具 ...
- Exchange Powershell:ForwardingAddress&InboxRule
查询在邮箱上设置的转发功能: Get-Mailbox -server MX01 -Filter {ForwardingAddress -like '*'} | Select-Object Name, ...
- 11.css定义下拉菜单
注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...
- 更新设置api
8.8 更新设置 API Elasticsearch允许在elasticsearch.yml文件中指定各种参数来调优.但你应该把这个文件当做 默认设置,可以在运行时通过Elasticsearch RE ...
- TGI指数
TGI指数 目标人群中国具有某一特征的群体占比/总体中具有相同特征的群体的占比*标准数100
- 第04章—整合Mybatis
spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...
- jQuery EasyUI 简介
简介 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 特点: ①easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. ②easyui 提供建 ...