一、调用摄像头与身份证对比验证
摄像头层级太高,要用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>