江苏龙网

  1. 主页 > 生活百科 > >

高级web网页人脸识别tracking.js

tracking.js

what？你没有看错 ， 强大的JAVAScript也可以实现人脸识别功能 。小编精心整理了一个人脸识别的JavaScript库（tracking.js） ， 通过这篇文章 ， 你可以了解到如何在网页中实现一个人脸识别功能 。
tracking.js
Tracking.js 是一个独立的JavaScript库 ， 用于跟踪从相机实时收到的数据 。跟踪的数据既可以是颜色 ， 也可以是人 ， 也就是说我们可以通过检测到某特定颜色 ， 或者检测一个人体/脸的出现与移动 ， 来触发JavaScript 事件 。它是非常易于使用的API ， 具有数个方法和事件（足够使用了） 。
还有一个我觉得不错的功能就是 ， 截取摄像头的图像 ， 对于一些网站用这个功能来设置用户头像也是个很炫的功能 。
简单实例
引入核心类:
<script src=https://www.isolves.com/it/cxkf/yy/js/2022-05-16/"js/tracking-min.js">
引入颜色模型类:
<script src=https://www.isolves.com/it/cxkf/yy/js/2022-05-16/"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() {}
});
在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
【高级web网页人脸识别tracking.js】事件
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这四个参数表示左上角的坐标和框出来人脸的大小 。
示例案例
图片人脸识别
效果图

高级web网页人脸识别tracking.js

文章插图
 
实现思路
通过tracking.js获取图片中人脸的信息 ， 然后根据这些信息绘制相对应的div框即可 。
核心代码
<style>
.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;
}
</style>
<div class="demo-frame">
<div class="demo-container">
<img id="img" src=https://www.isolves.com/it/cxkf/yy/js/2022-05-16/"img/faces.jpg" />
</div>
</div>
。。。。。。。。。。。。。
作者：MonkeySoft
篇幅有限更多请见扩展链接：
http://www.mark-to-win.com/tutorial/50710.html




    推荐阅读


    上一篇：打印机喷头堵塞不用慌 教你轻松应对

    下一篇：这个markdown编辑器无敌了