uniapp 微信小程序人脸识别

<template>
	<view class="page-content">
		<view class="containerV">

			<view class="headerV">
				<view class="top-tips1">
					<view>请将正对手机，头部匹配摄像区域</view>
				</view>
			</view>

			<view class="contentV">
				<view class="mark"></view>
				<image v-if="tempImg" mode="widthFix" :src="tempImg" />
				<camera v-if='isAuthCamera' device-position="front" class="camera"
					flash="off" resolution='high' />
				<view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				tipsText: '', // 文案提示
				tempImg: '', // 人脸识别后的base64图片
				cameraEngine: null, // 相机引擎
				devicePosition: false, // 摄像头朝向
				isAuthCamera: true, // 是否拥有相机权限
			}
		},

		onLoad(options) {
			this.initData()
		},

		methods: {
			// 初始化相机引擎
			initData() {
				// #ifdef MP-WEIXIN

				// 1、初始化人脸识别
				wx.initFaceDetect()
				// 2、创建 camera 上下文 CameraContext 对象
				this.cameraEngine = wx.createCameraContext()
				// 3、获取 Camera 实时帧数据
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
					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 {
								const {
									pitch,
									roll,
									yaw
								} = face.angleArray;
								const standard = 0.5
								if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
									Math.abs(yaw) >= standard) {
									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 = '正在识别中'
									var that=this;
								    setTimeout(function() {
										that.handleTakePhotoClick()
									}, 1000);
									// 执行拍照识别功能
									// 这里可以写自己的逻辑了
								}
							}
						},
						fail: (err) => {
							if (err.x == -1 || err.y == -1) {
								this.tipsText = '检测不到人'
							} else {
								this.tipsText = err.errMsg || '网络错误，请退出页面重试'
							}
						},
					})
				})
				// 5、开始监听帧数据
				listener.start()
				// #endif
			},


            //开始拍照
			handleTakePhotoClick() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.camera']) {
							this.isAuthCamera = false
							uni.openSetting({
								success: (res) => {
									if (res.authSetting['scope.camera']) {
										this.isAuthCamera = true;
									}
								}
							})
						}
					}
				})
				this.cameraEngine.takePhoto({
					quality: "high",
					success: ({
						tempImagePath
					}) => {
						console.log(tempImagePath);
	
		   //拍摄图转base64
		     uni.getFileSystemManager().readFile({
		
		         filePath: tempImagePath, //选择图片返回的相对路径
		
		         encoding: 'base64', //编码格式
		
		         success: res => { //成功的回调
		            this.tempImg = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
					
					this.$emit('returnImg',this.tempImg)  //传出拍照后的图片数据给父组件
		         },fail: (e) => {
		             console.log("图片转换失败");
		         }
		
		     })

					}
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;

		.containerV {
			width: 100%;
			height: 100%;

			.headerV {
				.top-tips1 {
					margin-top: 60rpx;
					color: #1C1C1C;
					font-size: 36rpx;
					text-align: center;
				}

				.top-tips2 {
					margin-top: 20rpx;
					color: #00AAFF;
					font-size: 28rpx;
					text-align: center;

				}
			}

			.contentV {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				height: 661rpx;
				margin-top: 30rpx;

				.tipV {
					bottom: 30rpx;
					position: absolute;
					line-height: 90rpx;
					padding-left: 24rpx;
					padding-right: 24rpx;
					max-width: calc(100vw - 50rpx * 2);
					text-align: center;
					font-size: 30rpx;
					background: #000000;
					opacity: 0.75;
					color: #FFFFFF;
					border-radius: 16rpx;

					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					z-index: 5;
				}

				.camera {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.mark {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					width: 750rpx;
					height: 100%;
					// background: url("@/static/face/view_face_background.png") no-repeat center bottom;
					background-size: 750rpx 661rpx;

				}

				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 3;
					border-radius: 50%;
				}
			}

			
</style>