博客

刚好遇到要写微信小程序人脸识别的功能，就翻了一下微信小程序文档

人脸识别

跳转文档

缺点：1. 照片也可以成功。我试了一下眨眼，但是好像不行，闭眼都能识别到眼睛。

2. ios的微信小程序 有兼容性问题，具体表现在返回的数据不一样，需要自己测试。

然后没有demo，就自己研究了，记录一下。用

uniapp

写的，所以需要

条件编译

。

HTML（需要用到相机组件）

<view class="">
		<camera v-if="showcamera" device-position="front" resolution="high" style="width: 100%; height: 100vh;">
			<cover-view class="cover_bg">
				<cover-view class="cover_face" :style="{backgroundColor: bgcolor}">
					<cover-view class="cover_text">{{tipsText}}</cover-view>
				</cover-view>
			</cover-view>
		</camera>
		<view class="photo_img" v-else>
			<image :src="tempImg" mode=""></image>
		</view>
</view>

css

.cover_bg {
		height: 100%;
		width: 100%;
		position: relative;
	}
	.cover_face {
		width: 100%;
		height: 32vh;
		position: absolute;
		bottom: 0;
		background-color: #FFFFFF;
		color: #333;
		font-size: 36rpx;
		font-weight: bold;
		
		.cover_text {
			letter-spacing: 2rpx;
			text-align: center;
			margin-top: 24%;
		}
}

js

export default {
		data() {
			return {
				showcamera: true,
				bgcolor: '#F2F2F2',
				colorArray: ['#F2F2F2', '#F56B79', '#74B2FF'],
				current: 0,
				tipsText: '请显示正脸',
				tempImg: '',
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			setInterval(() => {
				if(this.current > 2) {
					this.current = 0
				}
				this.changes()
				this.current++
			}, 2000)
		},
		methods: {
			changes() {
				this.bgcolor = this.colorArray[this.current]
			},
			initData() {
				// #ifdef MP-WEIXIN
				wx.initFaceDetect()
				const context = wx.createCameraContext()
				const listener = context.onCameraFrame((frame) => {
				  console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
					wx.faceDetect({
						frameBuffer: frame.data,
						width: frame.width,
						height: frame.height,
						enablePoint: true,
						enableConf: true,
						enableAngle: true,
						enableMultiFace: true,
						success: (faceData) => {
							console.log(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.1 || face.angleArray.roll >= 0.1 || face.angleArray.yaw >= 0.1) {
									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 = '人脸认证成功'

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

由于微信小程序 video，cover-view 的很多限制，本来想中间镂空的圆形，周围都是变色，结果cover-view 不支持box-shadow，就做的比较简单了。

持续更新中…

后面还要做当前人脸是不是和身份证上的一样

。（哎！！！）

听说是后台调Python的一个接口，哈哈哈，轻松了。