JavaScript不可思议的强大!人脸识别也可以轻松搞定

原创 智云编程 教程 前端 78阅读 10 天前 举报

是不是觉得不可思议,js已经强大到这个地步?
是的,js日新月异,它在不断的进步。只要稍不留神,那我们都只能望尘莫及了。

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

tracking.js

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

tracking.js文档地址
tracking.js示例地址

人脸识别示例

代码解析:

1、首先引入tracking.js,以及相关的实例js
2、new 一个实例,获取face集合,event.data
3、遍历集合,获取每个face坐标等信息
4、绘制出坐标所在选区(这部分可以忽略,主要就上面3步)

坐标集合描述

有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学web前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习交流qun: 784783012 。有任何不明白的东西随时来问我。点击:前端学习圈

脸嘴巴,眼睛识别

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

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

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

PK

先来介绍一下另外一款人脸识别插件,JqueryFaceDetection,顾名思义,是一款基于Jquery的插件。

代码上面我们就不做对比了,主要来看看识别度,识别情况。

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

tracking.js

JqueryFaceDetection

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

颜色识别

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

其他

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

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复