Last year’s change of military uniform was very popular, and then found the face++ interface found very fun. Just write a demo, give a star if you like

Face fusion simple demo

directory

  • instructions
  • Quick start
    • The installation
    • The tutorial

instructions

  • Based on face++ ai face recognition interface, face fusion simple demo

Quick start

The installation

$ npm i
$ npm run start         
Copy the code

Open your browser and enter: localhost: 3000

Catalog Description:

├─ public // Front End Resources ├─files // ├─ routes // Template fileCopy the code

The tutorial

Build an Express project
$NPM init // Initialize project reference package.json"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": "~, version 1.8.1"."multiparty": "latest"."serve-favicon": "~" 2.4.2
}
Copy the code
  • Create a new public folder under the directory (for front-end static resources, CSS /js/image/files)
  • Create app.js in the directory and write the basic code (see inside app.js for details)
App.js main code/* Import route file */
var index = require("./routes/index");

/* Create a new express instance */
var app = express();

/* Use EJS as the template */
app.set("views", path.join(__dirname, "views"));
app.set("view engine"."ejs");

/* The front end can access static resources. The folder is public */
app.use(express.static("public"));

/* /
app.use("/", index);

/* Listen on port 3000 */
app.listen(3000, () = > {console.log("app listening on port 3000!");
});
Copy the code
  • Create a new routes folder under the directory and create an index.js (Express route).
Index.js main codevar express = require("express");
var router = express.Router();
/* Test get and POST requests */
router.get("/".function(req, res, next) {
  res.render("index", { title: "Express" });
});
router.post("/".function(req, res, next) {
  res.send("UFace post ok");
});
Copy the code
  • Create the views folder under the directory, create index.ejs, write the main front-end code (Express template)

      
<html>
  <head>
    <title>Face test</title>
    <! -- public folder CSS /style -->
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <h1>Random test</h1>
    <p>Upload a face</p>
    <form id="uface">
      <input type="file" name="files" id="upload" />
      <! Click upload function -->
      <button type="button" onClick="mergeImg()">submit</button>
    </form>

    <div class="outer">
        <! -- Composite image placeholder -->
      <img id="target" src="" style="display: none;" />
      <canvas id="canvas" width="713" height="578"></canvas>
    </div>

    <! Jquery is available for easy operation.
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <! Public directory js/index -->
    <script src="/js/index.js"></script>
  </body>
</html>

Copy the code
To upload pictures
  • Front-end JS writing
function mergeImg() {
    /* Upload the form object */
  var formData = new FormData();
  formData.append("file", $("#upload") [0].files[0]);
  $.ajax({
    type: "POST"./* The back end receives the route, as described below
    url: "/file/merge/uploading".data: formData,
    processData: false.contentType: false.success: function(res) {
      console.log(res);
      /* Fill the front image SRC and display */
      $("#target") [0].src = "data:image/png; base64," + res.result;
      $("#target").show(); }}); }Copy the code

  • Apply FAPI_KEY for face++

    • Face++ open platform to register and log in
    • Find API Key and Secret (github more details)

  • Write back-end interface logic

routes/index.js

/*face++ authorization, replace with your */
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({
      /* Save the uploaded file */
    uploadDir: "./public/files/"
  });
    /* Multiparty parses the form file */
  form.parse(req, function(err, fields, files) {
    var filesTmp = JSON.stringify(files, null.2);

    if (err) {
      console.log("Parsing error" + err);
    } else {
      console.log( filesTmp);

      var inputFile = files.file[0];
      var uploadedPath = inputFile.path;

        /* Upload file */
      var imageFace = fs.readFileSync(uploadedPath);
      var base64ImgFace = new Buffer(imageFace).toString("base64");
        /* Read the template diagram and encode it as base64 */
        //TODO:After their own front-end upload template map
      var imageTpl = fs.readFileSync("./public/images/face/timg.jpg");
      var base64ImgTpl = new Buffer(imageTpl).toString("base64");

        /* request the face++ interface */
      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); }); }}); });Copy the code
  • Start the
$ node app.js
Copy the code

rendering

  • Refer to the lot