<template>
|
<view>
|
<view class="title">{{verifyText}}</view>
|
<view class="container">
|
<image :src="faceImg" v-if="faceImg" class="faceImg" mode="widthFix" />
|
<camera class="camera" device-position="front" flash="off"></camera>
|
</view>
|
<!-- <view class="tabbtns">
|
<up-button color='#fece01' class="text-69" text="保存" @click='getJpgImg'></up-button>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
let listener = null;
|
let videoCtx = null;
|
let VKSession = null;
|
let faceVerifyTime = null; //面容验证倒计时
|
export default {
|
data: {
|
faceImgHeight: 314,
|
faceImgWidth: 314,
|
face: {
|
origin: {
|
x: 0,
|
y: 0
|
},
|
size: {
|
width: 0,
|
height: 0
|
},
|
points: []
|
},
|
verifyText: "请移动面容到框内",
|
isCentre: false, //是否面容在正中间
|
startVerify: false, //是否正在验证
|
faceImg: "", //面容图片地址
|
},
|
/**
|
* 生命周期函数--监听页面加载
|
*/
|
onLoad() {
|
// this.getAuthSetting() //获取权限
|
this.initFaceVerify()
|
},
|
methods: {
|
// getAuthSetting() {
|
// wx.getSetting({
|
// success: (res) => {
|
// if (!res.authSetting['scope.camera']) {
|
// wx.showModal({
|
// title: '请允许获取摄像头权限',
|
// showCancel: false,
|
// complete: (modalRes) => {
|
// if (modalRes.confirm) {
|
// wx.openSetting({
|
// success: (settingRes) => {
|
// if (!settingRes.authSetting[
|
// 'scope.camera']) {
|
// this.getAuthSetting()
|
// } else {
|
// wx.navigateBack()
|
// }
|
// }
|
// })
|
// }
|
// }
|
// })
|
// }
|
// }
|
// })
|
// },
|
initFaceVerify() {
|
console.log('我是initFaceVerify----------------------');
|
videoCtx = null;
|
listener = null;
|
VKSession = null;
|
videoCtx = wx.createCameraContext();
|
let count = 0;
|
listener = videoCtx.onCameraFrame((frame) => {
|
count++;
|
if (count === 5) {
|
this.detectFace(frame);
|
count = 0;
|
}
|
});
|
VKSession = wx.createVKSession({
|
version: 'v1',
|
track: {
|
plane: {
|
mode: 1
|
},
|
face: {
|
mode: 2
|
}
|
}
|
});
|
VKSession.on('updateAnchors', (anchors) => {
|
// 有面容
|
console.log(anchors, '有面容')
|
|
if (this.startVerify) {
|
return;
|
}
|
let anchor = anchors[0];
|
this.face = {
|
points: anchor.points,
|
origin: anchor.origin,
|
size: anchor.size
|
}
|
this.isFaceCentered()
|
})
|
VKSession.on('removeAnchors', (anchors) => {
|
// 面容消失
|
if (this.startVerify) {
|
return;
|
}
|
this.verifyText = '请移动面容到框内'
|
this.isCentre = false
|
this.face = {}
|
clearTimeout(faceVerifyTime)
|
faceVerifyTime = null;
|
})
|
setTimeout(() => {
|
// 直接开始
|
this.handleStart()
|
}, 500);
|
},
|
onUnload() {
|
VKSession.destroy();
|
},
|
async getImageBase64_readFile(tempFilePath) {
|
const base64 = await new Promise(resolve => {
|
//获取全局唯一的文件管理器
|
wx.getFileSystemManager()
|
.readFile({ //读取本地文件内容
|
filePath: tempFilePath, // 文件路径
|
encoding: 'base64', // 返回格式
|
success: ({
|
data
|
}) => {
|
return resolve('data:image/png;base64,' + data);
|
},
|
fail(res) {
|
console.log('fail', res)
|
}
|
});
|
});
|
|
wx.hideLoading()
|
console.log('base64', base64)
|
// this.setData({
|
// saveImg: base64
|
// })
|
},
|
picture() {
|
this.startVerify = true
|
clearTimeout(faceVerifyTime)
|
faceVerifyTime = null;
|
videoCtx.takePhoto({
|
quality: 'normal',
|
success: (e) => {
|
// this.getImageBase64_readFile(e.tempImagePath).then(res=>{
|
// let obj = {
|
// imgBase64:res,//数据base64
|
// cordId:'',//身份证号码
|
// name:'',//姓名
|
// gender:2//性别
|
// }
|
// this.$api.IaiAddPersoBase64(obj).then(res=>{
|
// console.log(res,'----------------');
|
// })
|
// })
|
this.verifyText = '面容识别成功'
|
console.log(e.tempImagePath, '上传照片接口，图片换成远端url地址 自行替换');
|
this.faceImg = e.tempImagePath
|
this.$db.set('faceImg',e.tempImagePath)
|
uni.navigateBack()
|
//上传照片接口，图片换成远端url地址 自行替换
|
// uploadImage(e.tempImagePath).then((res) => {
|
// this.setData({
|
// faceImg: res
|
// })
|
// wx.showLoading({
|
// title: '正在验证',
|
// })
|
|
// try {
|
// // 执行后端分析人脸
|
// api({
|
// img: res
|
// }).then((writeoffRes) => {
|
// //识别成功
|
// //自行处理识别成功结果
|
// }).catch(err => {
|
// wx.hideLoading();
|
// wx.showModal({
|
// title: err.msg,
|
// showCancel: false,
|
// confirmText: '重新核验',
|
// complete: (res) => {
|
// if (res.confirm) {
|
// this.setData({
|
// startVerify: false,
|
// faceImg: "",
|
// verifyText: '请移动面容到框内',
|
// isCentre: false,
|
// face: {}
|
// }, () => {
|
// this.handleStart()
|
// })
|
// }
|
// }
|
// })
|
// })
|
// } catch (error) {
|
// console.log(error)
|
// }
|
// }).catch(() => {
|
// this.setData({
|
// startVerify: false,
|
// faceImg: "",
|
// verifyText: '请移动面容到框内',
|
// isCentre: false,
|
// face: {}
|
// }, () => {
|
// this.handleStart()
|
// wx.showToast({
|
// title: '网络连接失败，请重试',
|
// })
|
// })
|
// })
|
}
|
})
|
|
},
|
handleStart() {
|
VKSession.start((errno) => {
|
console.warn('VKSession.start errno', errno);
|
});
|
listener.start();
|
},
|
handleStop() {
|
listener.stop({
|
complete: (res) => {
|
console.warn('listener.stop', res);
|
}
|
});
|
VKSession.stop();
|
},
|
async detectFace(frame) {
|
// 获取面容
|
VKSession.detectFace({
|
frameBuffer: frame.data,
|
width: frame.width,
|
height: frame.height,
|
scoreThreshold: 0.8,
|
sourceType: 0,
|
modelMode: 2
|
});
|
},
|
isFaceCentered() {
|
// 判断面容是否在中间
|
if (!this.face.points) {
|
return;
|
}
|
let points = this.face.points[43]; //位置
|
let size = this.face.size; //大小
|
if (points.x > 0.65 || points.x < 0.4 || points.y > 0.65 || points.y < 0.35) {
|
this.verifyText = '请移动面容到框内'
|
this.isCentre = false
|
this.face = {}
|
clearTimeout(faceVerifyTime)
|
faceVerifyTime = null;
|
return
|
} else if (size.width > 0.95 || size.width < 0.32) {
|
this.verifyText = '请移动面容显示完整面容'
|
this.isCentre = false
|
this.face = {}
|
clearTimeout(faceVerifyTime)
|
faceVerifyTime = null;
|
return
|
}
|
this.verifyText = '请保持不动'
|
this.isCentre = true
|
this.verifyCentre()
|
},
|
verifyCentre() {
|
// 开始验证面容
|
if (faceVerifyTime || this.startVerify) {
|
return
|
} else {
|
faceVerifyTime = setTimeout(() => {
|
if (this.isCentre) {
|
this.handleStop()
|
this.picture()
|
} else {
|
clearTimeout(faceVerifyTime)
|
faceVerifyTime = null;
|
}
|
}, 1500);
|
}
|
}
|
|
},
|
}
|
</script>
|
<style>
|
.container {
|
position: relative;
|
padding: 200rpx 0;
|
}
|
|
.title {
|
position: absolute;
|
width: 100%;
|
text-align: center;
|
padding-top: 100rpx;
|
font-size: 36rpx;
|
}
|
|
.camera {
|
width: 100vw;
|
height: 800rpx;
|
margin: 0 auto;
|
}
|
|
.faceImg {
|
width: 100vw;
|
height: 800rpx;
|
margin: 0 auto;
|
position: absolute;
|
z-index: 999;
|
}
|
</style>
|
