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

时间: 2018-04-26阅读: 3642标签: 算法

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

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

JS排序算法:记数排序

计数排序是一个非基于比较的[排序算法],该算法于1954年由 Harold H. Seward 提出。 它的优势在于在对一定范围内的整数排序时,它的复杂度为Ο(n+k)(其中k是整数的范围), 快于任何比较排序算法。

JS实现链表_单链表

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

JavaScript 面试中常见算法问题详解

所谓提升,顾名思义即是 JavaScript 会将所有的声明提升到当前作用域的顶部。这也就意味着我们可以在某个变量声明前就使用该变量,不过虽然 JavaScript 会将声明提升到顶部,但是并不会执行真的初始化过程。

Js队列的实现与应用

队列与栈不同,它遵从先进先出(FIFO——First In First Out)原则,新添加的元素排在队列的尾部,元素只能从队列头部移除。

LZW算法压缩字符串数据

有的时候代码里不得不带上一串长的字符数据表,本来就是小功能,将这种不大不小的数据外部存放显得累赘,放源码里又碍眼又占空间。

Js队列和双端队列

最新添加的元素必须排在队列的末尾。在生活中也有队列的应用,比如我们在售票处排队等票,队头的人先拿到票,就走了,而新来的人,就必须排在队伟文明排队。

JavaScript实现获取两个排序数组的中位数算法示例

给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 。请找出这两个有序数组的中位数。要求算法的时间复杂度为 O(log (m+n)) 。你可以假设 nums1 和 nums2 不同时为空。

给一个数字,输出人民币组合(JavaScript算法)

人民币由100元,50元,20元10元,5元1元,5毛,1毛面额组合。写一个方法随便传入一个数字参数,就输出人民币组合。

js算法实现_二维数组中的查找

在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数

前端Js排序算法:冒泡排序、 选择排序、快速排序

典型的排序方法,命名来自鱼呼吸时吹出的气泡,上层的气泡总是最大的。选择排序:顾名思义,每次都选择最小的,然后交换位置,快速排序思路:二分法,先找一个基数

点击更多...

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