上年的換軍裝很火，然後發現了face++的介面發現很好玩。就寫了個demo，喜歡的給個star
人臉融合簡單demo
目錄
說明
- 基於 face++ ai 人臉識別介面，人臉融合簡單 demo
快速入門
安裝
$ npm i
$ npm run start
複製程式碼開啟瀏覽器輸入：localhost：3000
目錄說明:
├─ public //前端資源
├─files //檔案用來存放上傳檔案
├─ routes //路由
├─ views //模板檔案
複製程式碼教程
搭建一個express工程
$ npm init //初始化工程
參考package.json複製過來,直接npm install
"dependencies": {
"axios": "^0.18.0",
"baidu-aip-sdk": "^2.3.9",
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"morgan": "~1.8.1",
"multiparty": "latest",
"serve-favicon": "~2.4.2"
}
複製程式碼- 在目錄下新建public資料夾(放前端靜態資源，css/js/image/files)
- 在目錄下新建app.js，編寫基礎程式碼(具體參見app.js內部)
app.js主要程式碼
/* 引入路由檔案*/
var index = require("./routes/index");
/* 新建一個express例項*/
var app = express();
/* 使用ejs作為模板 */
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
/* 前端可以訪問靜態資源，資料夾是public */
app.use(express.static("public"));
/* 訪問首頁 */
app.use("/", index);
/* 監聽3000埠 */
app.listen(3000, () => {
console.log("app listening on port 3000!");
});
複製程式碼- 在目錄下新建routes資料夾，新建index.js（express路由）
index.js主要程式碼
var express = require("express");
var router = express.Router();
/* 測試一下get和post請求 */
router.get("/", function(req, res, next) {
res.render("index", { title: "Express" });
});
router.post("/", function(req, res, next) {
res.send("UFace post ok");
});
複製程式碼- 在目錄下新建views資料夾，新建index.ejs,編寫前端主要程式碼（express模板）
<!DOCTYPE html>
<html>
<head>
<title>face測試</title>
<!-- public資料夾下css/style -->
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<h1>隨便測試</h1>
<p>上傳face</p>
<form id="uface">
<input type="file" name="files" id="upload" />
<!-- 點選上傳函式 -->
<button type="button" onClick="mergeImg()">submit</button>
</form>
<div class="outer">
<!-- 合成的圖片佔位符 -->
<img id="target" src="" style="display: none;" />
<canvas id="canvas" width="713" height="578"></canvas>
</div>
<!-- 引進jquery，方便操作 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- public資料夾下js/index -->
<script src="/js/index.js"></script>
</body>
</html>
複製程式碼上傳圖片
- 前端js編寫
function mergeImg() {
/*變成form物件上傳*/
var formData = new FormData();
formData.append("file", $("#upload")[0].files[0]);
$.ajax({
type: "POST",
/* 後端接收路由，下面會說到 */
url: "/file/merge/uploading",
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res);
/* 返回來的填滿前端圖片src，然後展示 */
$("#target")[0].src = "data:image/png;base64," + res.result;
$("#target").show();
}
});
}
複製程式碼-
申請face++的FAPI_KEY
- face++開放平臺註冊並登陸
- 找到api key和Secret（github更詳細）
-
編寫後端介面邏輯
routes/index.js
/*face++ 的授權，替換成你的*/
let FAPI_KEY = "T_ohwyZ4qPexYQGOM6Qpp3-8tRxums_U";
let FSECRET_KEY = "hlXd8o2G_e_Q6_1FlXvBt09dohPQ9zg-";
let multiparty = require("multiparty");
let fs = require("fs");
router.post("/file/merge/uploading", function(req, res, next) {
var form = new multiparty.Form({
/* 上傳的檔案存放 */
uploadDir: "./public/files/"
});
/* multiparty解析form檔案*/
form.parse(req, function(err, fields, files) {
var filesTmp = JSON.stringify(files, null, 2);
if (err) {
console.log("解析錯誤" + err);
} else {
console.log( filesTmp);
var inputFile = files.file[0];
var uploadedPath = inputFile.path;
/* 上傳的檔案 */
var imageFace = fs.readFileSync(uploadedPath);
var base64ImgFace = new Buffer(imageFace).toString("base64");
/* 讀取模板圖，編碼成base64 */
//TODO:以後自己前端上傳模板圖
var imageTpl = fs.readFileSync("./public/images/face/timg.jpg");
var base64ImgTpl = new Buffer(imageTpl).toString("base64");
/* 請求face++介面 */
axios({
method: "post",
url: "https://api-cn.faceplusplus.com/imagepp/v1/mergeface",
data: qs.stringify({
api_key: FAPI_KEY,
api_secret: FSECRET_KEY,
template_base64: base64ImgTpl,
merge_base64: base64ImgFace
})
})
.then(data => {
res.send(data.data);
})
.catch(e => {
console.log(e.response.data);
});
}
});
});
複製程式碼- 啟動
$ node app.js
複製程式碼效果圖
- 參考github