client-mazu/src/FaceDetector.vue

<template>
  <div id="app">
    <header></header>
    <main class="content">
      <Face
        v-if="visible"
        ref="face"
        v-model="resultImage"
        :default-image="imageUrl"></Face>
      <div class="hidden">
        <Face default-image="/face.jpg"></Face>
      </div>
    </main>
    <footer>
      <div class="info">
        <span v-if="!imageUrl">
          请将人脸移入框内正对摄像头，并保持光线充足。勿佩戴帽子、墨镜
        </span>
      </div>

      <div>
        <el-button
          size="large"
          type="info"
          @click="hide()">
          关闭
        </el-button>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          @click="handleSubmit">
          确定
        </el-button>
      </div>
    </footer>
  </div>
</template>

<script>
import { faceidentify11 } from '@/api/face'
import compressImg from '@/assets/compress'
import Face from '@/components/GetFace/FaceDetector'

export default {
  data () {
    return {
      loading: false,
      visible: false,
      imageUrl: '',
      resultImage: null
    }
  },
  mounted () {
    const { ipcRenderer, remote } = require('electron')
    console.log(remote.getGlobal('windows')['index'])

    ipcRenderer.on('showFaceDetector', (event, data, skipCheck) => {
      this.visible = true
      this.resultImage = null
      this.imageUrl = data || ''
      this.skipCheck = skipCheck

      console.log(data, skipCheck)

      this.$nextTick(() => {
        this.show()
        // 打开摄像头
        if (!data) {
          this.$refs.face.fnOpen()
        }
      })
    })
  },
  components: {
    Face
  },
  methods: {
    show () {
      require('electron').remote.getCurrentWindow().show()
    },
    hide (data) {
      this.visible = false
      this.$refs.face && this.$refs.face.fnClose()

      data && this.sendResult(data)

      require('electron').remote.getCurrentWindow().hide()
    },
    handleSubmit () {
      let msg = ''

      if (!this.resultImage) {
        this.$message.error('未获取到人脸图像，请重新选择图片或拍照')
        return
      }

      if (this.resultImage.width * this.resultImage.height < 250 * 250) {
        msg = '人脸图太小，是否仍然提交？'
      }

      const submit = async () => {
        let validFace = await this.faceidentify11(this.resultImage.url)
        if (validFace) {
          this.$message.success('人脸校验成功。')

          setTimeout(() => {
            if (this.resultImage.width * this.resultImage.height > 400 * 400) {
              compressImg(this.resultImage.url, 400).then(res => {
                this.hide(res)
              })
            } else {
              this.hide(this.resultImage.url)
            }
          }, 1000)
        }
      }

      if (msg) {
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          submit()
        }).catch(() => {
        })
      } else {
        submit()
      }
    },
    // 人脸比对API
    faceidentify11 (face) {
      if (this.skipCheck) return face
      this.loading = true

      return faceidentify11({ img1: face.split(',')[1], img2: face.split(',')[1] }).then(res => {
        if (res.errInfo === '成功') {
          return face
        } else {
          this.$message({
            showClose: true,
            message: '人脸模糊，请重新拍照',
            type: 'error'
          })
          return false
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          message: '人脸模糊，请重新拍照',
          type: 'error'
        })
        return false
      }).finally(() => {
        this.loading = false
      })
    },
    sendResult (data) {
      const { ipcRenderer, remote } = require('electron')

      ipcRenderer.sendTo(remote.getGlobal('windows')['index'], 'getDectectorResult', data)
    }
  }
}
</script>

<style lang="scss">
* {
  padding: 0; margin: 0;
}
body,html {
  height: 100%;
}
#app {
  display: flex;  height: 100%; flex-direction: column; background: #eee;
}
.content {
  display: flex;  flex: 1;
}
footer {
  padding: 10px; margin: 0 10px 10px; background: #fff; border: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center;
  .info{
    color: red; font-size: 18px;
  }
}
.hidden {
  width: 0; height: 0; overflow: hidden;
}

</style>