欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

背景

        前段时间接触一个人脸融合类的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标签显示。

        关键代码如下:

        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

相关标签: 人脸融合 face++

上一篇: SQL sum函数

下一篇: 输了不服气