微信小程序调用摄像头_微信camera绘制到canvas上

一、调用摄像头与身份证对比验证

    摄像头层级太高，要用cover-view和cover-image写按钮和icon，才能覆盖在camera上

二、代码

<template>
  <div class="bmxt container-camera">
    <camera
      device-position="front"
      flash="off"
      bindinitdone="initdone"
      binderror="error"
      ref="canvasDOM"
      :style="style"
    ></camera>
    <cover-view class="camera-top">
      <cover-image :src="pic" alt class="camera-pic" />
      <cover-view class="box-camera-top">
        <cover-view class="text-start">{{ tip }}</cover-view>
        <cover-view v-if="nextBtn" class="b-btn" type="info" size="small" @click="next">下一步</cover-view>
        <cover-view
          v-else
          class="b-btn"
          type="info"
          size="small"
          :disabled="phoneDistance"
          @click="takePhoto"
        >开始验证</cover-view>
        <cover-view class="text-end">人脸识别上传的照片将用于身份核实</cover-view>
      </cover-view>
      <cover-view class="phone-switch phone-left">
        <cover-image src="/static/images/cancel.png" @click="backInfo" alt="取消" />
      </cover-view>
    </cover-view>
  </div>
</template>
<script>
import { uploadFile } from '@/utils/wxrequest'
import store from '@/store/store'
import Toast from '@/../static/vant/toast/toast'
export default {
  data() {
    return {
      style: '',
      pic: '/static/images/cicle-bg.png',
      tip: '请目视前方，进行人脸验证',
      nextBtn: false,
      showInfo: false,
      phoneDistance: false
    }
  },
  created() {
    const wh = {}
    const self = this
    wx.getSystemInfo({
      success: res => {
        wh.windowHeight = res.windowHeight / (res.windowWidth / 750)
        wh.screenHeight = res.screenHeight / (res.screenWidth / 750)
        self.cheight = 1.2 * res.screenWidth
        self.style = 'width: 100%; height:' + res.windowHeight + 'px; '
      }
    })
  },
  methods: {
    takePhoto() {
      console.log('拍照了')
      const ctx = wx.createCameraContext()
      const that = this
      ctx.takePhoto({
        quality: 'high',
        success: res => {
          that.pic = res.tempImagePath
          that.tip = '正在验证中，请稍等'
          that.phoneDistance = true
          uploadFile('/tencent/idCardFace', res.tempImagePath, 'file', {
            path: store.state.idCardUrl
          })
            .then(result => {
              if (result.result == 0) {
                console.log('成功')
                if (result.data.score > 70) {
                  that.tip = '验证成功，请点击下一步'
                  that.nextBtn = true
                } else {
                  that.tip = '验证失败，请继续验证'
                  that.pic = '/static/images/cicle-bg.png'
                }
              } else {
                console.log('失败')
                that.tip = '验证失败，请继续验证'
                that.pic = '/static/images/cicle-bg.png'
              }
              that.phoneDistance = false
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },
    error(e) {
      console.log(e.detail)
    },
    next() {
      this.$emit('finish')
    },
    backInfo() {
      this.$emit('toInfo', 0)
    }
  }
}
</script>
 
<style scoped>
.container-camera {
  position: relative;
}
.camera-top {
  background-size: 100%;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
}
.box-camera-top {
  margin: 430px 15px 15px;
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
}
.text-start {
  color: #fff;
  font-size: 16px;
  margin-bottom: 30px;
}
.text-end {
  color: #ccc;
  font-size: 12px;
  margin-top: 15px;
}
.camera-pic {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
}
.phone-switch {
  position: fixed;
  width: 40px;
  height: 40px;
  top: 15px;
  left: 15px;
  z-index: 11;
}
.phone-switch img {
  width: 100%;
  height: 100%;
}
.box-camera-top .b-btn {
  background-color: #1f76b3;
  color: #fff;
  width: 100%;
  border-radius: 50px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
</style>