纯前端实现人脸融合-调用Face++的人脸融合API接口实现

时间：2024-03-14 13:49:57

背景

        前段时间接触一个人脸融合类的H5，根据已有项目经验，直接选择腾讯AI的人脸融合API，接着等待3个工作日的模版审核期。不巧的是，由于面部遮挡审核被驳回（下图）。

纯前端实现人脸融合-调用Face++的人脸融合API接口实现

        如果再次提交审核，那根据上线时间是完全来不急的，故需要寻找无需模版审核的替代方案。

 

解决方法

        经过查询，提供人脸识别服务的Face++旷视，有人脸融合的开放API。        

        调用URL：

        https://api-cn.faceplusplus.com/imagepp/v1/mergeface

        调用方法：

        POST

        请求参数：

 

是否必选 参数名 类型 说明
必选 api_key String 调用此 API 的 API Key。
必选 api_secret String 调用此 API 的 API Secret。
必选(三选一)

template_url

... ...		 String

用于人脸融合的模板图，

模板图图片的 URL。
必选 template_rectangle String 模板图中进行人脸融合的人脸框位置。
必选(三选一)

merge_url

... ...

 String

用于人脸融合的融合图，

融合图的图片URL。
可选 merge_rectangle String 指定融合图中用以融合的人脸框位置。
可选 merge_rate Int 融合比例，范围 [0,100]。

        返回值说明 ：

字段

类型

说明

request_id

String

用于区分每一次请求的唯一的字符串。

result

String

融合后的图片，jpg 格式。base64 编码的二进制图片数据。

time_used

Int

整个请求所花费的时间，单位为毫秒。

error_message

String

当发生错误时才返回。

        通过查看其API文档，入参除了key和secret（注册账号后申请获得）外，只有模版图、模版图中人脸位置、用户上传图，三个参数。Face++的人脸检测API可在线获取模版图中人脸位置，例如：251,167,169,169。依次代表人脸框左上角纵坐标（top），左上角横坐标（left），人脸框宽度（width），人脸框高度（height），如下图：

纯前端实现人脸融合-调用Face++的人脸融合API接口实现

        然后，直接调用人脸融合接口即可，返回融合后的图片base64编码数据，再根据需求直接赋值给img标签显示。

        关键代码如下：

 

  1. var postData = 'api_key=xxx&api_secret=xxx'

  2. + '&template_url=http://xxx.com/xxx.jpg'

  3. + '&template_rectangle=251,167,169,169'

  4. + '&merge_url=http://xxx.com/xxx.jpg';

  5.  

  6. $.ajax({

  7. dataType: 'json',

  8. type: 'POST' ,

  9. url: 'https://api-cn.faceplusplus.com/imagepp/v1/mergeface',

  10. data: postData,

  11. success: function(response){

  12. if(typeof(response.error_message) == "undefined"){

  13. // todo: 在这里添加生成后的逻辑，response.result 为生成图的base64编码

  14. $('.uploadpic').attr('src', 'data:image/jpg/png;base64,' + response.result);

  15. }else{

  16. // todo: 在这里添加上传失败的逻辑

  17. alert('请重新上传照片');

  18. }

  19. },

  20. error: function(xhr, status, error){

  21. console.log(xhr.responseText);

  22. // todo: 在这里添加上传失败的逻辑

  23. alert('请重新上传照片');

  24. }

  25. });

        这样，不需要提交模版审核，简单调用API，即可完成效果很棒的人脸融合效果。可通过扫描下图二维码查看效果。

 

 

Demo二维码

        纯前端实现人脸融合-调用Face++的人脸融合API接口实现

 

BTW

        1、注意融合比例参数merge_rate，数字越大融合结果包含越多融合图特征，默认为50。这里可设为100，融合特征会非常明显；

 

        2、接口规定模版为JPG格式，所以无法直接实现png图的融合。腾讯AI的人脸融合接口是可以用png模版的；

        3、试用账号是不保证并发的，如果要保证并发可以查看官方的价格。

 

参考链接

        人脸检测：https://www.faceplusplus.com.cn/face-detection/

        人脸融合：https://www.faceplusplus.com.cn/face-merging/

        人脸融合API文档：https://console.faceplusplus.com.cn/documents/20813963

相关文章