纯前端实现人脸融合-调用Face++的人脸融合API接口实现
背景
前段时间接触一个人脸融合类的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),如下图:
然后,直接调用人脸融合接口即可,返回融合后的图片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二维码
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