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

背景

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

纯前端实现人脸融合-调用Face++的人脸融合API接口实现_第1张图片

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


解决方法

        经过查询,提供人脸识别服务的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接口实现_第2张图片

        然后,直接调用人脸融合接口即可,返回融合后的图片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接口实现_第3张图片


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

你可能感兴趣的:(前端)