人脸识别的圆框

<template>
<view class="camera-box">
　　<camera class="camera-el" frame-size="large" device-position="front"
　　flash="off" @error="error">

　　</camera>
　　<view class="jc-face-state-hint" v-if="tipsText != ''">
　　　　<view class="mask">
　　　　　　<view class="text">{{tipsText}}</view>
　　　　</view>
　　</view>
　　<u-modal :show="showSqModal" confirmColor="#22b3ad" showCancelButton @confirm="openSetting" @cancel="showSqModal = false" content="人脸验证需要您授权摄像头权限, 否则无法使用! 请授权后重新应用或者本页面."></u-modal>
</view>
</template>

initCamera() {
　　// #ifdef MP-WEIXIN
　　wx.initFaceDetect()
　　this.context = wx.createCameraContext()
　　this.listener = this.context.onCameraFrame((frame) => {
　　　　wx.faceDetect({
　　　　frameBuffer: frame.data,
　　　　width: frame.width,
　　　　height: frame.height,
　　　　enablePoint: true,
　　　　enableConf: true,
　　　　enableAngle: true,
　　　　enableMultiFace: true,
　　　　success: (faceData) => {
　　　　　　let face = faceData.faceInfo[0]
　　　　　　if (faceData.x == -1 || faceData.y == -1) {
　　　　　　　　this.tipsText = '检测不到人脸'
　　　　　　}
　　if (faceData.faceInfo.length > 1) {
　　　　this.tipsText = '请保证只有一人做认证'
　　} else {
　　　　if (face.angleArray.pitch >= 0.3 || face.angleArray.roll >= 0.3 || face.angleArray.yaw >= 0.3) {
　　　　this.tipsText = '请平视摄像头'
　　} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
　　　　0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
　　　　face.confArray.rightEye <= 0.8) {
　　　　this.tipsText = '请勿遮挡五官'
　　} else {
　　　　// 人脸在，可以执行操作
　　　　this.tipsText = '请保持该状态'
　　　　if(this.captureFace) {
　　　　this.context.takePhoto({
　　　　　　quality: "normal",
　　　　　　success: (res) => {
　　　　　　　　// tempImagePath 照片文件的临时路径 (本地路径)，安卓是 jpg 图片格式，ios是png
　　　　　　　　let imgFormat = res.tempImagePath.substring(res.tempImagePath.lastIndexOf(".")+1)
　　　　　　　　this.$emit('getFace', res.tempImagePath, imgFormat)
　　　　　　}
　　　　})
　　}

　　}
}
},
fail: (err) => {
　　// console.log(err)
　　if (err.x == -1 || err.y == -1) {
　　　　this.tipsText = '检测不到人脸'
　　} else {
　　　　this.tipsText = '网络错误，请退出页面重试'
　　}
}
})
})
this.listener.start()
// #endif
}

<style lang="scss" scoped>
.camera-box {
　　position: relative;
　　width: 75vw;
　　height: 75vw;
　　background-color: #FFFFFF;
　　border-radius: 50%;
　　margin: 0 auto 50px auto;
　　border: 5px solid #03CAC7;
　　.camera-el,
　　.jc-face-state-hint {
　　　　position: absolute;
　　　　left: 50%;
　　　　top: 50%;
　　　　transform: translate(-50%, -50%);
　　　　width: 97%;
　　　　height: 97%;
　　　　border-radius: 50%;
　　}

.jc-face-state-hint {
　　z-index: 99;
　　overflow: hidden;
　　.mask {
　　　　position: relative;
　　　　width: 100%;
　　　　height: 20%;
　　　　background-color: rgba(0,0,0,.3);
　　　　.text {
　　　　　　position: absolute;
　　　　　　width: 100%;
　　　　　　top: 50%;
　　　　　　transform: translateY(-50%);
　　　　　　color: #ffffff;
　　　　　　text-align: center;
　　　　}
　　}

　　}
}

.goback-btn-box {
width: 50%;
margin: 0 auto;
}
</style>

 以上是子组件中的代码

如组件关键代码如下

getFace(tempImagePath) {
　　this.captureFace = false;
　　wx.getFileSystemManager().readFile({
　　　　filePath: tempImagePath,
　　　　encoding: "base64",
　　　　success: res => {
　　　　　　this.$request(this.$operate.apis.searchFaceTencent, {
　　　　　　　　// this.$request(this.$operate.apis.searchFace, { //searchFaceTencent //注释的这两个是原来的
　　　　　　　　// image_base64: res.data
　　　　　　　　external_fields: {
　　　　　　　　　　fileName: this.s_userMsg.name+'-人脸',
　　　　　　　　　　patientId: this.s_userMsg.selfcheckPatientId,
　　　　　　　　　　personName: this.s_userMsg.name
　　　　　　　　},
　　　　　　image_base64: res.data,
　　　　　　threshold: 0
　　　　}, 'POST').then(res => {

　　　　　　if (res.data.code == 200 && res.data.data != "") {
　　　　　　　　if(res.data.data.selfcheckPatientId == this.s_userMsg.selfcheckPatientId) {
　　　　　　　　　　uni.userC.updateUserMsg('w_userMsg', JSON.parse(res.data.data.wxDetail))
　　　　　　　　　　uni.$u.route({
　　　　　　　　　　　　type: 'reLaunch',
　　　　　　　　　　　　url: "/pages/home/home"
　　　　　　　　　　})
　　　　　　　　}
　　　　　　}
　　　　　　this.captureFace = true;
　　　　}).catch(err => {
　　　　　　console.log("nono",res)
　　　　　　this.captureFace = true;
　　　　})

　　},
　　fail: err => {
　　　　console.log("转换base64失败")
　　}
})
}