人脸融合简单demo-CSDN博客

上年的换军装很火，然后发现了face++的接口发现很好玩。就写了个demo，喜欢的给个star

人脸融合简单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更详细）
编写后端接口逻辑

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);
        });
    }
  });
});
复制代码