直接上代码了
<template>
<view class="outer">
<view class="center tips">
<text>拍摄您本人人脸,请确保正对手机,光线充足</text>
</view>
<view class="center peopleinfo">
<text>{{realName}},{{idcardNo}}</text>
</view>
<!-- 调用后置摄像头 device-position="back" -->
<camera device-position="front" flash="off" @error="error" class="facevideo"></camera>
<!-- <view ref="video" class="facevideo"></view> -->
<image ref="faceImg" :src="src" style="display: none;">
<canvas id='canvas' canvas-id="canvas" style="border: 0px solid red;margin: auto;display: none;"></canvas>
<view class="fgx"></view>
<view class="gui-flex gui-rows gui-space-between" style="margin: 30rpx 30rpx;">
<view>
<cover-image class="tips-img" src="cloud://cloud1-9gr515656577195e.636c-cloud1-9gr515656577195e-1308129473/projectImages/face/face-phone.svg"></cover-image>
<text>正对手机</text>
</view>
<view>
<cover-image class="tips-img" src="cloud://cloud1-9gr515656577195e.636c-cloud1-9gr515656577195e-1308129473/projectImages/face/much-sun.svg"></cover-image>
<text>光线充足</text>
</view>
<view>
<cover-image class="tips-img" src="cloud://cloud1-9gr515656577195e.636c-cloud1-9gr515656577195e-1308129473/projectImages/face/face-nocover.svg"></cover-image>
<text>脸无遮挡</text>
</view>
</view>
<button type="default" class="gui-button gui-bg-blue" @click="faceGather" style="margin-top: 30%;">
<text class="gui-icons gui-color-white gui-button-text">识别本人人脸</text>
</button>
</view>
</template>
<script>
export default {
data() {
return {
realName: '',
idcardNo: '',
video: '',
canvas: '',
vendorUrl: '',
interval: '',
time: 3,
ctx: '',
src: '',
imageBase64: '',
requestId: ''
}
},
created() {},
onLoad: function(option) {
},
methods: {
// 人脸识别
faceGather: function() {
var that = this;
that.requestId = new Date().getTime() + Math.ceil(Math.random() * 100000);
// 1.等待1秒后,采集人脸照片
uni.showToast({
title: "即将开始人脸识别,请正对屏幕",
icon: 'none'
});
console.log("开始人脸识别,请正对屏幕");
that.ctx = uni.createCameraContext();
that.takePhoto();
},
takePhoto: function() {
let that = this;
that.ctx.takePhoto({
quality: 'high',
success: (res) => {
//that.src = res.tempImagePath
uni.getFileSystemManager().readFile({
filePath: res.tempImagePath,
encoding: 'base64',
success: r => {
//that.imageBase64 = r.data;
console.log("======生成照片=======");
console.log(r.data.substr(0,10));
that.requestPost(r.data);
}
})
}
});
},
error: function(e) {
console.log("=====摄像头出现错误====");
console.log(e.detail);
},
requestPost(imageBase64){
let that = this;
let formData = {
"requestId": that.requestId,
"imageData": imageBase64
};
console.log("======开始发送数据=======");
that.$http.post("face/detection", formData, {
header: {
'content-type': 'application/x-www-form-urlencoded'
}
}).then(res => {
if(res.data.result === 'true'){
if(res.data.message === "0000"){
// 人脸识别成功
uni.showToast({
title: "人脸识别成功",
icon: 'none'
});
// 调用上一个页面方法
// var pages = getCurrentPages();
// var prevPage = pages[pages.length - 2];
// 关闭当前页面 返回详细信息页面
uni.navigateBack();
// prevPage.$vm.formSubmit();
} else { // 监测超时
uni.showToast({
title: "人脸识别失败,请重试",
icon: 'none'
});
}
} else {
uni.showToast({
title: "人脸采集失败,请重新采集",
icon: 'none'
});
}
});
}
}
}
</script>
<style>
.outer {
padding: 20px 20px;
}
.center {
text-align: center;
}
.tips {
font-weight: 400;
font-style: normal;
font-size: 16px;
height: 27px;
}
.peopleinfo {
color: #999999;
font-weight: 400;
font-style: normal;
font-size: 12px;
}
.facevideo {
background-color: #007AFF;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 30px;
border-radius: 100px;
}
.fgx {
border-bottom: 1px solid #e4e4e4;
;
margin-top: 40px;
}
.tips-img {
height: 35px;
}
</style>
参考