1.人脸识别触发行为功能【基础版及以上版本权限】

小常发表于:2017年12月13日 16:28:26更新于:2019年04月17日 14:47:46

一、功能效果

0015cb6c553b505a946a5f047c63b79

《【人脸识别】你的颜值能打多少分》


上传照片后的检测效果

0015a325b59503b4984a2598c2e1479


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


二、场景应用

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

1.证件照

0015a31f6e27962fa6a02963f30dd62


2.脸部照片

0015a3219e8e74c8972cc760c137d8b


3.大头照

0015a31f6d29a8eab4ccb29314b37b9


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

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

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

0015a3235043550e519923428c24e4c

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

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

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


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

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

0015a322e4eeb81cf2dca43a1385a14

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


三、素材准备

1.用于触发识别照片的按钮、用于显示证件照的图片;一般证件照的尺寸比例为常用的1寸、2寸证件照尺寸比例。在H5里的尺寸比例分别为:

(1)1寸证件照:宽25:高35

(2)2寸证件照: 宽35:高49 


2.大头照的尺寸比例是1:1


四、人脸识别触发行为用法

基本用法

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

image.png


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

image.png


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

image.png


4.人像识别证件照。用于生成后显示的图片是提前放进去的,下图中命名为“证件照底版”(证件照的比例已经在素材准备帮大家整理过了),图片关联的时候,就是关联到这张用于显示的照片。

image.png


5.人像识别大头照。提前在页面中放一张用于显示大头照的图片,大头照的比例是1:1,并在在图片关联那里关联。

image.png


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

image.png


高级用法

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

image.png


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

image.png


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

image.png


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

image.png


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

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

image.png


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

image.png