純前端實現人臉融合-呼叫Face++的人臉融合API介面實現
背景
前段時間接觸一個人臉融合類的H5，根據已有專案經驗，直接選擇騰訊AI的人臉融合API，接著等待3個工作日的模版稽核期。不巧的是，由於面部遮擋稽核被駁回（下圖）。
如果再次提交稽核，那根據上線時間是完全來不急的，故需要尋找無需模版稽核的替代方案。
解決方法
經過查詢，提供人臉識別服務的Face++曠視，有。
呼叫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、試用賬號是不保證併發的，如果要保證併發可以檢視官方的價格。
參考連結