tracking.js页面人脸识别插件使用方法


Posted in Javascript onApril 16, 2020

tracking.js是页面识别人脸的一个插件,首先是tracking.js的git地址

在下载完tracking.js后,我们需要一个能测试的页面,这个页面需要在服务器上,比如本地的localHost:8080。然后需要引入两个检查人脸必须的文件tracking-min.js和face-min.js。 `

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
 tracker.setInitialScale(4);
 tracker.setStepSize(2);
 tracker.setEdgesDensity(0.1);

 tracking.track('#video', tracker, { camera: true });

 tracker.on('track', function(event) {
 context.clearRect(0, 0, canvas.width, canvas.height);

 event.data.forEach(function(rect) {
 context.strokeStyle = '#a64ceb';
 context.strokeRect(rect.x, rect.y, rect.width, rect.height);
 context.font = '11px Helvetica';
 context.fillStyle = "#fff";
 context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
 context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
 });
 });`

上面这些事主要的人脸检测使用代码其中:

tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);

这些是设置的参数,文档中没有明确的说明,暂时不知道用处。可以通过tracker.stop()来停止页面对人脸的监听。

如果是要监听摄像头的人像就必须判断浏览器是否支持接入摄像头,其中最主要的方法是navigator.getUserMedia,具体的说明参考这里。在获取摄像头之后就可以监听摄像头,判断是否有人脸,在track事件中就可以截取需要的图片。

具体的截取方法:

var canvas = $('canvas'),
 context = canvas.getContext('2d'),
 video = $('video');
context.drawImage(video, 0, 0, 200, 150);
var snapData = canvas.toDataURL('image/png'),
var imgSrc = "data:image/png;" + snapData;

imgSrc 可以直接用于页面图片的显示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
You might like
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php正则表达式(regar expression)
2011/09/10 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
Angular工具方法学习
2016/12/26 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
学生实习推荐信范文
2013/11/26 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
校运会广播稿100字
2014/01/27 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书