当前位置:新蒲京娱乐场 > 科技中心 > 纯前端实现人脸识别-提取-合成

纯前端实现人脸识别-提取-合成

文章作者:科技中心 上传时间:2019-08-31

有关于面部识别的算法,要说起来就很专精了,不多谈,就谈谈一点简单和浅显的吧。之前索尼的相机有个儿童面部优先的功能,大体的识别的模式就是儿童的面部较小,五官较紧凑,面部轮廓更接近圆形。类似的,也可以通过统计学规律分辨年龄和性别,比如头发形状,面部轮廓,五官的排列。不过这个功能是噱头的成分更多一些,因为这个技术必然可靠性很低,如果它能识别泰国人妖和 HKT 组合,那才真正具有划时代的创新价值。而且这个识别居然能更好的帮助美颜?嗯……那个直接输出 RAW 格式照片我就更不想说了,小米简直是在挑战许多专业从业人员的底线。

原文地址前端路上, 转载请注明出处。

 

最近火爆朋友圈的军装照H5大家一定还记忆犹新,其原理是先提取出照片中的面部,然后与模板进行合成,官方的合成处理据说由天天P图提供技术支持,后端合成后返回给前端展示,形式很新颖效果也非常好,整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案,因此理论上前端也可以完成人脸识别-提取-合成整个流程,实现纯前端的军装照H5效果。

前端人脸识别

首先需要的是人脸识别,这个一听就觉得高大上的东西原理并不深奥,无非是用人的面部特征规则对图像进行匹配和识别,这项工作前端虽然可以实现,但前端实现基本就只能依据内置规则库进行匹配,这个库的质量就决定了识别质量,而通常更成熟的方案是引入机器学习,让程序不断自我修正和提高,进一步提高识别率,机器学习的前端库倒是也有,但把这两者结合起来的还没发现,因此对前端人脸识别的准确率不要报太高期望。

新蒲京娱乐场,现有的前端人脸识别库不算多,这里我们选择的是效果相对好点的trackingjs,这个类库功能非常强大,库如其名,它可以完成各种追踪类的图像处理任务,人脸识别只是其众多功能之一,而且通过选配插件,还可以精确识别眼睛、鼻子等五官的位置,貌似稍微折腾一下也可以实现美图秀秀的效果。

这里我们只用trackingjs实现面部识别,初始化一个面部识别任务的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
//实例化
var tracker = new tracking.ObjectTracker(['face']);
//识别回调
tracker.on('track', function(event) {
    if (!event.data.length) {
        return console.log('画面中没有人脸');
    }
    event.data.forEach(function(rect, i) {
        console.log(rect);//单个面部数据
    })
})
//配置参数
...

这样一个面部识别任务就初始化完成了,调用方式如下:

1
2
tracking.track('#img', tracker);
//其中'#img'参数是目标图像的选择器

在识别回调中event.data就是数组格式的面部数据,如果长度为0则表示图像中没有人脸或者识别失败,如果识别成功,单个面部数据的格式如下:

1
2
3
4
5
6
{
    x: number,          //面部位于原图x轴方向位置
    y: nuber,           //面部位于原图y轴方向位置
    width:number,       //面部区域宽度
    height:nubmer       //面部区域高度
}

有了这个面部数据就可以很容易的将该区域从原图中提取出来,前端当然就用canvas啦,示例如下:

1
2
3
4
5
6
7
var img = document.getElementById("img");
var faceCtx = document.getElementById("mycanvas").getContext('2d');

var theFace = ...; //假设我们识别到了theFace

//使用drawImage()方法将面部绘制出来
faceCtx.drawImage(img, theFace.x, theFace.y, theFace.width, theFace.height, 0, 0, theFace.width, theFace.height);

到这里我们已经实现了面部识别 提取,而且代码量也没多少,其实这里面有个小坑要在实践中才会发现,那就是trackingjs的配置,文档中能找到4个跟识别有关的配置,分别是:

1
2
3
4
setClassifiers(classifiers)
setEdgesDensity(edgesDensity)
setScaleFactor(scaleFactor)
setStepSize(stepSize)

 

看不懂吧,我也看不懂,而且文档中对他们没有任何有用的说明,在测试中我只使用了后两个配置,翻译过来分别是”比例因子”和”步长”,经过枯燥的人肉测试发现,这两个参数的有效取值范围分别在1 - 21.1 - 2,其中setStepSize不能为1,否则会浏览器会卡死,所以从1.1开始取值,取值超过2也可以,但识别成功的概率就很低了。通过调整这两个参数绝大多数图像都可以成功识别,唯独对面部大特写很难识别,这可能需要配合另外两个参数吧,我实在没耐心继续人肉测试下去了,感兴趣的自己回去玩吧。

本文由新蒲京娱乐场发布于科技中心,转载请注明出处:纯前端实现人脸识别-提取-合成

关键词: