tracking.js 人脸检测

tracking.js in Vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <input type="file" @change="change($event)" accept="image/*" />
    <img alt="face" :src="face" ref="face" class="face" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { wechatInfo } from "./utils/common/wechat";
import ImageLoad from "./utils/common/ImageLoad";

require("tracking");
require("tracking/build/data/face");

export default {
  name: "app",
  components: {
    HelloWorld
  },

  data() {
    return {
      logoImage: require("./assets/logo.png"),
      // consoleface: "https://cdn.midoci.com/wsx/mock/ycy.jpg",
      face: "",
      tracker: null,
      trackerTask: null
    };
  },

  async created() {
    await wechatInfo();
    await this.preload();

    this.initTrack();
  },

  methods: {
    preload() {
      let preload = new ImageLoad();
      preload
        .load([this.logoImage])
        .then(res => {
          // this.showLoading = false;
          console.log("预加载完成", res);
        })
        .catch(error => {
          // console.warn(error);
        });
    },
    change(e) {
      let file = event.target.files[0];

      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = target => {
        file.src = target.currentTarget.result;
        this.face = file.src;
        this.$nextTick().then(()=> {
          // DOM 更新了
          this.track();
        });

      };
    },
    detecting_run() {
      let faceNumber = 0;
      var ref = this;
      console.log("I got into the detecting run function");
      this.tracker.on("track", function(event) {
        event.data.forEach(function() {
          console.log("detected 检测到人脸");
          faceNumber++;
        });
        if (!faceNumber) {
          console.log("未检测到人脸");
        }
      });
    },
    initTrack() {
      this.tracker = new window.tracking.ObjectTracker("face");
     // this.tracker.setInitialScale(4);
      //this.tracker.setStepSize(2);
      //this.tracker.setEdgesDensity(0.1);

     this.tracker.setStepSize(1.7);
      this.trackerTask = window.tracking.track(this.$refs.face, this.tracker, {
        camera: false
      });
      this.detecting_run();
    },
    track() {
      window.tracking.track(this.$refs.face, this.tracker, {
        camera: false
      });
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.face {
  display: flex;
  width: 100%;
}
</style>
WangShuXian6 / blog

tracking.js 人脸检测 #92

tracking.js

安装

tracking.js in Vue
