人臉融合簡單demo

時間 2019-11-07

標籤融合簡單 demo 简体版

原文原文鏈接

上年的換軍裝很火，而後發現了face++的接口發現很好玩。就寫了個demo，喜歡的給個starjavascript

人臉融合簡單demo

$ 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更詳細）
編寫後端接口邏輯java

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);
        });
    }
  });
});
複製代碼