本日我们就来看看是什么js插件可以如此厉害?

人脸识别JavaScript也可以轻松搞定

tracking.js

tracking.js 库将不同的打算机视觉算法和技能引入浏览器环境。
通过利用当代HTML5规范,能够进行实时颜色跟踪、人脸检测等等。
而这些牛逼的功能,仅仅只有7kb大小。

html5人脸识别源码人脸辨认JavaScript也可以轻松搞定 CSS

人脸识别示例

<script src=\"大众./tracking-min.js\公众></script><script src=\"大众./face-min.js\公众></script>...<img id=\"大众img\"大众 src=\公众assets/faces.jpg\"大众>...<script>window.onload = function() { var img = document.getElementById('img'); var tracker = new tracking.ObjectTracker('face'); tracking.track(img, tracker); tracker.on('track', function(event) { event.data.forEach(function(rect) { console.log(rect.x, rect.y, rect.width, rect.height); plotRectangle(rect.x, rect.y, rect.width, rect.height); }); }); // 下方的代码可以先忽略 var friends = [ 'Thomas Middleditch', 'Martin Starr', 'Zach Woods' ]; var plotRectangle = function(x, y, w, h) { var rect = document.createElement('div'); var arrow = document.createElement('div'); var input = document.createElement('input'); input.value = friends.pop(); rect.onclick = function name() { input.select(); }; arrow.classList.add('arrow'); rect.classList.add('rect'); rect.appendChild(input); rect.appendChild(arrow); document.getElementById('photo').appendChild(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>

代码解析:

1、首先引入tracking.js,以及干系的实例js

2、new 一个实例,获取face凑集,event.data

3、遍历凑集,获取每个face坐标等信息

4、绘制出坐标所在选区(这部分可以忽略,紧张就上面3步)

人脸识别JavaScript也可以轻松搞定

坐标凑集描述

人脸识别JavaScript也可以轻松搞定

脸嘴巴,眼睛识别

代码大同小异,不过须要在引入两个js文件

...<script src=\"大众./eye-min.js\公众></script><script src=\"大众./mouth-min.js\"大众></script>...<script>var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);</script>

人脸识别JavaScript也可以轻松搞定

通过上图,就会创造一个问题,不是很清晰的部位,是不能被识别出来的,最左边的人像,只识别出了一只眼睛。

这里还有一个js插件也可以做人脸识别,咱们就来比拟一下。

PK

先来先容一下其余一款人脸识别插件,JqueryFaceDetection,顾名思义,是一款基于Jquery的插件。

代码上面我们就不做比拟了,紧张来看看识别度,识别情形。

人脸识别JavaScript也可以轻松搞定

此图一出,有爱好JqueryFaceDetection的小伙伴要说,what? 说好的人脸识别,你给我放个大猩猩是几个意思?好吧,我错了,来看下图。

tracking.js

人脸识别JavaScript也可以轻松搞定

JqueryFaceDetection

人脸识别JavaScript也可以轻松搞定

这下就好解释问题了,tracking.js略胜一筹。

颜色识别

颜色识别只须要引入tracking-min.js即可。
这里在图中查找,品红,青色和黄色,然后用框标记出来。

window.onload = function() { var img = document.getElementById('img'); var demoContainer = document.querySelector('.demo-container'); var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']); tracker.on('track', function(event) { event.data.forEach(function(rect) { window.plot(rect.x, rect.y, rect.width, rect.height, rect.color); }); }); tracking.track('#img', tracker); window.plot = function(x, y, w, h, color) { var rect = document.createElement('div'); document.querySelector('.demo-container').appendChild(rect); rect.classList.add('rect'); rect.style.border = '2px solid ' + color; rect.style.width = w + 'px'; rect.style.height = h + 'px'; rect.style.left = (img.offsetLeft + x) + 'px'; rect.style.top = (img.offsetTop + y) + 'px'; }; };

人脸识别JavaScript也可以轻松搞定

其他

tracking.js不仅能识别图片,还能处理视频。

人脸识别JavaScript也可以轻松搞定

人脸识别JavaScript也可以轻松搞定

总的来看,是不是觉得很强大了?未来可期,前端技能越来越厉害,希望和你携手共进。

公告

喜好

源码地址和源文件下载请点击下方“理解更多”