【2017-12-14】人脸识别、图片遮罩功能更新、一镜到底组件优化

小常发表于:2017年12月12日 19:11:17更新于:2018年02月01日 23:17:24


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

证件照

0015a31f6e27962fa6a02963f30dd62


脸部照片

0015a31f6d29a8eab4ccb29314b37b9

大头照

0015a3219e8e74c8972cc760c137d8b

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

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

一、人脸识别

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

该功能特色:

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

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

  • 年龄(age):整数

  • 性别(gender):男/女/未知

  • 颜值(beauty):范围[0~100]、值越大,颜值越高

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

0015a325b59503b4984a2598c2e1479

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

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

0015a3262ac554f3de509a91e51bb75

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

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

二、图片遮罩

图片遮罩功能类似于PS、AI软件中的剪切蒙版,我们在可以在设计软件中勾画任意形状,然后导出一张PNG图片,周围透明;图片整体的不透明度可以调整,影响到识别后人像照片的显示。

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

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

0015a322e4eeb81cf2dca43a1385a14

三、一镜到底功能更新

可拖动:可拖动指:是否允许观看的用户,通过手势上下划动屏幕,控制一镜到底的播放。也可在设置自动播放的同时设置可拖动,在一镜到底自动播放时也允许观看者手动控制。

image.png

  • 自动播放:勾选自动播放,在切换到一镜到底组件当前页时,播放一镜到底画面;

  • 自动播放速度:速度的值越大,播放的画面飞出越快。

image.png

以上两者是结合使用的,对于手动控制播放时,也可以设置滑动速度,暂时不支持,但后期会继续优化。

  • 切换到指定帧:可以在放置一镜到底组件的页面上,放置其他元素,用其他元素去触发一镜到底画面的切换,如添加一个按钮,在某个手势动作时切换到指定帧,切换时间目前为固定时间1秒(s)。

image.png

  • 一镜到底播放触发器:开始播放时、结束播放时(最后一帧画面出现时)的触发器。

image.png

一镜到底组件后续还将优化,如切换到指定帧时的相关触发、对于控制一镜到底播放的手势(如长按开始结束时)等。

以上就是本次的功能更新、优化,欢迎大家持续关注,提出宝贵意见。