Tracking.js_ js人脸识别前端代码/算法框架

更新日期: 2018-04-26阅读量: 3800标签: 算法

Tracking.js描述

Tracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。它是非常易于使用的API,具有数个方法和事件(足够使用了)。还有一个我觉得不错的功能就是,截取摄像头的图像,对于一些网站用这个功能来设置用户头像也是个很炫的功能。

通过分析tracking.js文件实现多人同时检测人脸并将区域限定范围内的人脸标识出来,并保存为图片格式。注:本地预览请用火狐浏览器,chrome浏览器需要在服务端查看效果


Tracking.js的使用

Tracking.js需要先引入tracking-min.js,然后根据你的需求在选择性的引入eye-min.js,face-min.js,mouth-min.js。

只需要在你的页面中加一张图片即可  ,如下:

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

以下是js部分的代码

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


注意:Tracking.js对于暗光、半张脸情况的图片是不容易识别出来的。

说明:具体使用方法可以查看官网,其中:rect.x, rect.y, rect.width, rect.height这四个参数表示左上角的坐标和框出来人脸的大小。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/721

JS实现链表_单链表

链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成。每个结点包括两个部分:一个是存储数据元素的数据域

原生Js获取数组中最长的连续数字序列的方法

给定一个无序的整数序列, 找最长的连续数字序列。例如:给定[100, 4, 200, 1, 3, 2],最长的连续数字序列是[1, 2, 3, 4]。此方法不会改变传入的数组,会返回一个包含最大序列的新数组。

Js实现kmp算法_字符串查找算法

KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt同时发现,因此人们称它为克努特——莫里斯——普拉特操作(简称KMP算法)。KMP算法的关键是利用匹配失败后的信息

原生js实现冒泡排序算法,javascript冒泡排序

javascript冒泡排序的实现,冒泡排序是一个非常常见的排序算法,对于一个数组,每趟排序时依次比较两个相邻的数,如果他们的顺序错误就交换两数位置。

Js哈希摘要算法

最近在看一些NPM库的时候总是看到各种哈希签名算法,之前工作中也有用到过签名算法,但并没有深入理解过其中的原理,于是找了点资料稍微了解了一下,总结了这篇文章。

JS数据结构与算法_树

一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点(除了顶部的第一个节点)以及零个或多个子节点:关于数的深度和高度的问题,不同的教材有不同的说法

RSA 背后的算法

随着科技发展,计算能力越来越强,特别是量子计算的兴起,我们对超大质数的位数要求也越来越高,512 bit 的 RSA 已经被破解,而 1024 bit 也已经摇摇欲坠,现阶段 2048 bit 长度还是安全的,可是未来,谁又知道呢?

js实现统计一个字符串中出现最多的字母的方法总汇

给出一个字符串,统计出现次数最多的字母。方法一为 String.prototype.charAt:先遍历字符串中所有字母,统计字母以及对应显示的次数,最后是进行比较获取次数最大的字母。方法二 String.prototype.split:逻辑和方法一相同,只不过是通过 split 直接把字符串先拆成数组。

用js在控制台打印九九乘法表

不管是打印什么样三角形九九乘法表,我们都应该找到有规律的地方,比如第一列的数字是什么规律,第一行的数字是什么规律,只要找到了共性,九九乘法表就很简单

Js常用的算法教程

Js常用的算法教程 深度广度、冒泡选择、防抖节流等,函数在调用倒计时n时间内没有重复调用,则执行函数,不然重新倒计时

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!