what?你没有看错,强大的JavaScript也可以实现人脸识别功能。小编精心整理了一个人脸识别的JavaScript库(tracking.js),通过这篇文章,你可以了解到如何在网页中实现一个人脸识别功能。
tracking.js
Tracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。它是非常易于使用的API,具有数个方法和事件(足够使用了)。
还有一个我觉得不错的功能就是,截取摄像头的图像,对于一些网站用这个功能来设置用户头像也是个很炫的功能。
简单实例
引入核心类:
src="https://www.it610.com/article/js/tracking-min.js">
引入颜色模型类:
src="https://www.it610.com/article/tracker/color.js">
实例化类启用电脑的摄像头:
var videoCamera = new tracking.VideoCamera().render();
实例化跟踪通过颜色洋红和显示X,Y和Z位置的检测区域在控制台:
videoCamera.track({
type: ‘color’,
color: ‘magenta’,
onFound: function(track) {
console.log(track.x, track.y, track.z);
},
onNotFound: function() {}
});
【前端高级|高级web网页人脸识别tracking.js】在vue中使用
// 引入trackingjs所需文件
import tracking from ‘@/assets/js/tracking-min.js’
import ‘@/assets/js/face-min.js’
const tracker = new window.tracking.ObjectTracker(‘face’);
注:tracking类import之后,使用时需要window.tracking
事件
onFound : 每次检测到目标时就会触发该事件
new tracking.VideoCamera().track({
onFound: function(track) {
// do something
}
});
onNotFound : 每次没有检测到目标时就会触发该事件.
new tracking.VideoCamera().track({
onNotFound: function(track) {
// do something
}
});
rect.x, rect.y, rect.width, rect.height这四个参数表示左上角的坐标和框出来人脸的大小。
示例案例
图片人脸识别
效果图
文章图片
实现思路
通过tracking.js获取图片中人脸的信息,然后根据这些信息绘制相对应的div框即可。
核心代码
>
.rect {
border: 2px solid #a64ceb;
left: -1000px;
position: absolute;
top: -1000px;
/* background-color: #a64ceb;
*/
border:1px solid #a64ceb;
}#img {
position: absolute;
top: 50%;
left: 50%;
margin: -173px 0 0 -300px;
}
文章图片
var img = document.getElementById('img');
//实例化tracker对象
var tracker = new tracking.ObjectTracker(['face']);
tracker.setStepSize(1.7);
//tracker对象和标签关联
tracking.track('#img', tracker);
//添加事件
tracker.on('track', function(event) {
//给每个人脸绘制对应的框
event.data.forEach(function(rect) {
window.plot(rect.x, rect.y, rect.width, rect.height+20);
});
});
window.plot = function(x, y, w, h) {
var rect = document.createElement('div');
document.querySelector('.demo-container').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';
};
视频人脸识别
效果图
文章图片
更多请见:http://www.mark-to-win.com/tutorial/50710.html
推荐阅读
- 人工智能|【人脸识别实战一】系统架构设计
- html|手把手教你用vuepress搭建自己的网站(2)
- vue|vue.config.js 配置参考
- WEB前端线上系统课2022最新coderwhy
- 人脸识别|使用Opencv+树莓派实现人脸识别(二)人脸识别和PyQt界面整合
- 人脸识别|面向佩戴口罩的人脸识别系统【4】-人脸识别
- 人脸识别|人脸识别 宿舍门禁系统(python qt opencv带数据库)
- Java|JAVA常用工具收集总结
- spring|40 个 SpringBoot 常用注解