1.人脸识别功能【年费用户权限】

小常发表于:2017年12月13日 16:28:26更新于:2019年01月15日 11:15:30

由于大家对于个人信息收集、人像趣味交互类H5的需求越来越多,现开发人脸识别的触发行为,目前主要有三个显示效果:证件照、脸部图片、大头照。常用于企业招聘或活动类H5的人像照片等信息收集;个性化人像合成的趣味交互。

证件照

0015a31f6e27962fa6a02963f30dd62

脸部照片

0015a3219e8e74c8972cc760c137d8b

大头照

0015a31f6d29a8eab4ccb29314b37b9

由于开发周期较长且复杂,该功能为付费功能,目前基础版及以上版本用户可使用,具体的收费细节后续我们将不断跟大家交流。

一、先为大家展示人脸识别前期成果:

人脸识别(上线时间:周四-12.13)

根据H5作品中已经添加的或用户上传带有人像的图片,可识别并设置显示不同人脸范围,成功或失败时,做触发设置。

该功能特色:

  • 即使个人上传的照片角度有倾斜,该功能可在识别人像后,对人像的五官矫正为90°;

  • 可根据个人需求选择要显示的人脸范围。

0015a3235043550e519923428c24e4c

  • 年龄(age):整数(根据年龄不同,分别做触发设置)

  • 性别(gender):男/女/未知(根据性别不用,分别做触发设置)

  • 颜值(beauty):范围[0~100]、值越大,颜值越高(根据颜值不同,分别做触发设置)

上传照片后的检测效果,如图:

0015a325b59503b4984a2598c2e1479


这一部分主要是展示检测功能,至于人像合成的契合度,需要大家在处理遮罩跟显示图片时处理下细节。

下面有一个完整案例供大家体验:

0015a333199bf73e4faf5eeeac8ab58     0015a323ac0644669cb27a0b542aa5c

偷偷告诉大家,带有人脸的表情包也可以识别03.gif

二、在哪里设置:

一般是给某个元素设置触发器,触发该行为,如图:

image.png

图片来源是指:要识别的图片是从哪里来的。

1.图片来源中的图片组件,是指已经放在页面中一张人像图片,不需要用户自己去上传,然后去做一些识别效果;一定要记得先添加好图片,再去设置下图的触发行为。

image.png

2.用户上传照片:打开H5作品的用户,点击指定的按钮,从自己移动端或电脑端设备中的本地图片上传一张人像图片,到H5作品中进行识别等。

image.png

分别为大家讲解设置方式:

(一)人像识别证件照

元素准备:用于触发识别照片的按钮、用于显示证件照的图片

在这里让用户自己上传一张人像照片到H5中,生成一张证件照。

用于生成后显示的图片也是提前放进去的,下图中命名为“证件照底版”。图片关联的时候,就是关联到这张用于显示的照片。

image.png

(二)人像识别大头照

记得要提前在页面中放一张用于显示大头照的图片,并在在图片关联那里关联。

image.png

(三)人像识别脸部图片

记得要提前在页面中放一张用于显示脸部图片的图片,并在图片关联那里关联。

image.png

三个关联设置:年龄、性别、颜值

1.要结合参数变量来使用,首先在页面中添加三个参数变量,并分别命名为:年龄、性别、颜值

image.png

2.并将每个参数变量的参数类型都设置为文本,初始值设置为空(即删掉默认数值即可)

image.png

3.给页面中添加的图片或按钮元素,设置人脸识别的触发行为时,分别关联到这三个参数变量。

image.png

4.将三个参数变量的显示框放置在指定位置,点击触发的元素时,即可触发相关的数据检测,最终把检测的结果传递给参数变量显示在页面中。

image.png

后期我们将对该功能不断完善,优化人像合成时参与截屏的配合度,满足大家更多需求。

当性别等于不同的值时,如何做相关触发设置:

1.给性别的参数变量设置触发条件;注意:触发方式设置为等待触发,因为要等人像识别成功后才去执行。

image.png

2.当人像识别成功时可以做相关的触发

image.png

人脸识别可以结合图片遮罩使用:

现在简单为大家展示:不同透明度的遮罩,识别后的效果差异,可以根据个人需求去调整。

0015a322e4eeb81cf2dca43a1385a14

至于详细的教程,大家可以戳图片遮罩的教程学习。