uniapp實(shí)現(xiàn)人臉識別功能詳細(xì)示例

更新時間：2022年10月24日 09:46:42 作者：Lizy！

這次使用uni-app框架開發(fā)一個小程序,有一個刷臉功能,所以下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)人臉識別功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

微信小程序?qū)崿F(xiàn)人臉識別，具體應(yīng)用場景前端實(shí)現(xiàn)人臉信息采集拍到正面照片發(fā)送給后端

該方法暫時只針對微信小程序

前端具體效果展示如下：

我們分開來分開解釋這個方法哈

首先要新寫一個頁面用來跳轉(zhuǎn)，具體頁面的布局可以自由發(fā)揮根據(jù)實(shí)際要求來，

主要運(yùn)用了 wx.initFaceDetect(Object object) 具體想了解更多可以去查看官方文檔哈，鏈接放在下面了 wx.initFaceDetect(Object object) | Weixin public doc

在項目里進(jìn)入頁面初始化人臉識別可以識別到是否拍攝的是人臉檢測五官哈

具體實(shí)現(xiàn)方法下面就直接貼代碼了

代碼語法語句都放在了代碼注釋中

html部分：

template>
	<view class="page-content">
		<view class="containerV">
			<view class="headerV">
				<view class="top-tips1">
					<view>請將正對手機(jī)，頭部匹配攝像區(qū)域</view>
				</view>
				<view class="top-tips2">
					為了便于識別認(rèn)證，請拍攝本人頭像
				</view>
			</view>
			<view class="contentV">
				<view class="mark"></view>
				<image v-if="tempImg" mode="widthFix" :src="tempImg" />
				<camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera"
					flash="off" resolution='high' />
				<view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
			</view>
			<view class="footerV">
				<view style="width: 100%;">
					<view v-if="!tempImg" style="width: 100%;">
						<view class="privacyV">
							<view class="icon"></view>
							<view class="text">
								照片隱私<text @click="handleJumpSecurityClick">安全保障</text>中…
							</view>
						</view>
						<view class="bottom-tips-2">該照片僅作為你認(rèn)證的憑證</view>
						<view class="take-photo-bgV">
							<!-- 圖片上傳   -->
							<view v-show="true" class="btn-change-upload" @click="handleChooseImage" ></view>
							<!--拍照-->
							<view class="btn-take-photo" @click="handleTakePhotoClick" ></view>
							<!-- 切換鏡頭 -->
							<view class="btn-change-camera" @click="handleChangeCameraClick" ></view>
						</view>
					</view>
					<view class="confirmV" v-else>
						<view class="btn-cancel" @click="handleCancelClick">
							取消
						</view>
						<view class="btn-ok" @click="handleOkClick">
							確定
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

下面是js部分按鈕都暫時用背景顏色來填充自己更換所需要的圖片哈

<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: 400upx;
					height: 400upx;
					border-radius: 50%;
				}
				.mark {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					width: 750rpx;
					height: 100%;
					// background:deeppink;
					background-size: 750rpx 661rpx;
				}
				image {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 3;
				}
			}
 
			.footerV {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.privacyV {
					padding-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.text {
						font-size: 30rpx;
						color: #1C1C1C;
						text-align: center;
						line-height: 42rpx;
						margin-left: 15rpx;
						text {
							font-size: 30rpx;
							color: #00AAFF;
							text-align: center;
							line-height: 42rpx;
						}
					}
					.icon {
						width: 40rpx;
						height: 47rpx;
						background:green;
						background-size: 100% auto;
					}
				}
 
				.bottom-tips-2 {
					margin-top: 20rpx;
					color: #999999;
					text-align: center;
					font-size: 26rpx;
				}
				.take-photo-bgV {
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.btn-take-photo {
						margin: 0rpx 80rpx 0rpx 80rpx;
						width: 196rpx;
						height: 196rpx;
						background: yellow;
						background-size: 100% auto;
					}
					.btn-change-upload {
						left: 130rpx;
						width: 80rpx;
						height: 80rpx;
						background: blue;
						background-size: 100% auto;
					}
					.btn-change-camera {
						right: 130rpx;
						width: 80rpx;
						height: 80rpx;
						background:red;
						background-size: 100% auto;
					}
				}
				.confirmV {
					margin: 200rpx 100rpx 0rpx 100rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.btn-cancel {
						font-size: 32rpx;
						color: #1C1C1C;
					}
					.btn-ok {
						font-size: 32rpx;
						color: #00AAFF;
					}
				}
			}
		}
	}
</style>

js部分，一定要注意上傳圖片接收到的路徑和拍照接受到的路徑

<script>
	export default {
		name: 'index',
		components: {
		},
		data() {
			return {
				tipsText: '', // 錯誤文案提示
				tempImg: '', // 本地圖片路徑
				BASE_API,
				cameraEngine: null, // 相機(jī)引擎
				devicePosition: false, // 攝像頭朝向
				isAuthCamera: true, // 是否擁有相機(jī)權(quán)限
			}
		},
 
		onLoad(options) {
			this.initData()
		},
		mounted(){
		},
		methods: {
			// 初始化相機(jī)引擎
			initData() {
				// #ifdef MP-WEIXIN
				// 1、初始化人臉識別
				wx.initFaceDetect()
				// 2、創(chuàng)建 camera 上下文 CameraContext 對象
				this.cameraEngine = wx.createCameraContext()
				// 3、獲取 Camera 實(shí)時幀數(shù)據(jù)
				const listener = this.cameraEngine.onCameraFrame((frame) => {
					if (this.tempImg) {
						return;
					}
					// 4、人臉識別，使用前需要通過 wx.initFaceDetect 進(jìn)行一次初始化，推薦使用相機(jī)接口返回的幀數(shù)據(jù)
					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 = '請拍照'
									// 這里可以寫自己的邏輯了
								}
							}
						},
						fail: (err) => {
							if (err.x == -1 || err.y == -1) {
								this.tipsText = '檢測不到人'
							} else {
								this.tipsText = err.errMsg || '網(wǎng)絡(luò)錯誤，請退出頁面重試'
							}
						},
					})
				})
				// 5、開始監(jiān)聽幀數(shù)據(jù)
				listener.start()
				// #endif
			},
			// 切換設(shè)備鏡頭
			handleChangeCameraClick() {
				this.devicePosition = !this.devicePosition;
			},
			// 圖片上傳
			handleChooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						console.log(res,'打印res，哈哈哈哈哈')
						if (res.errMsg === 'chooseImage:ok') {
							uni.showLoading({
								title: '照片上傳中...'
							})
							const tempFilePaths = res.tempFilePaths[0]
							  this.upLoad(res.tempFilePaths);
						}
					},
					fail: (res) => {
					},
				});
			},
            // 拍照點(diǎn)擊
			handleTakePhotoClick() {
				if (this.tipsText != "" && this.tipsText != "請拍照") {
					return;
				}
				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
					}) => {
						this.tempImg = tempImagePath
					}
				})
			},
			// 點(diǎn)擊確定上傳
			handleOkClick() {
                //  這里的 this.tempImg 是經(jīng)過人臉檢測后  拍照拿到的路徑  
				this.upLoadOne(this.tempImg)
				uni.navigateBack({
					delta: 1
				});
			},
			upLoad(tempFilePaths) {
                // #  注意  這里上傳圖片拿到的tempFilePaths是一個數(shù)組啊
			    // 圖片上傳
			    uni.showLoading({
			        title: "上傳中，請稍后...",
			    });
			    let proAll = [];
			    tempFilePaths.forEach((item) => {
					console.log(item,'打印item')
			        proAll.push(this.upLoadOne(item));
			    });
			    Promise.all(proAll).then((res) => {
			        // 上傳完成
			        uni.hideLoading();
			    });
			},
			upLoadOne(imgPath) {
			    //  然后這里imgPath 傳過來的是 要上傳的臨時本地圖片的路徑
                //  具體上傳方法根據(jù)自己的請求方式   請求自己的接口
			},
			// 點(diǎn)擊 - 取消上傳
			handleCancelClick() {
				this.tempImg = ''
			},
			// 點(diǎn)擊 - 人臉安全保障按鈕
			handleJumpSecurityClick() {
				uni.showToast({
					icon: "none",
					title: "假裝跳轉(zhuǎn)人臉安全保障",
					duration: 2000,
				})
			},
		}
	}
</script>

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)人臉識別功能的文章就介紹到這了,更多相關(guān)uniapp人臉識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: