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

程序员文章站 2022-04-16 13:30:02

...

背景

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

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

解决方法

经过查询，提供人脸识别服务的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标签显示。

关键代码如下：

        var postData = 'api_key=xxx&api_secret=xxx'
                    + '&template_url=http://xxx.com/xxx.jpg'
                    + '&template_rectangle=251,167,169,169'
                    + '&merge_url=http://xxx.com/xxx.jpg';

        $.ajax({
            dataType: 'json', 
            type: 'POST' ,
            url: 'https://api-cn.faceplusplus.com/imagepp/v1/mergeface',
            data: postData,
            success: function(response){ 
                if(typeof(response.error_message) == "undefined"){
                    // todo: 在这里添加生成后的逻辑，response.result 为生成图的base64编码
                    $('.uploadpic').attr('src', 'data:image/jpg/png;base64,' + response.result); 
                }else{
                    // todo: 在这里添加上传失败的逻辑
                    alert('请重新上传照片');
                } 
            },
            error: function(xhr, status, error){
                console.log(xhr.responseText);
                // todo: 在这里添加上传失败的逻辑
                alert('请重新上传照片');
            }
        });

这样，不需要提交模版审核，简单调用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