devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[uniapp] uniapp 实现人脸识别 示例_uniapp 人脸识别

作者：菜鸟追梦旅行 | 2024-03-26 15:27:52

赞

踩

uniapp 人脸识别

 

微信小程序实现人脸识别，具体应用场景   前端实现人脸信息采集  拍到正面照片  发送给后端

        该方法暂时只针对微信小程序

前端具体效果展示 如下：

 

我们分开来分开解释这个方法哈

         首先要新写一个页面用来跳转，具体页面的布局可以自由发挥 根据实际要求来 ，

        主要运用了  wx.initFaceDetect(Object object)   具体想了解更多可以去查看官方文档哈，链接放在下面了 wx.initFaceDetect(Object object) | Weixin public doc

        在项目里进入页面初始化人脸识别   可以识别到是否拍摄的是人脸  检测五官哈

具体实现方法   下面就直接贴代码了

        代码语法语句都放在了代码注释中

html部分：

  1. template>
  2. 	<view class="page-content">
  3. 		<view class="containerV">
  4. 			<view class="headerV">
  5. 				<view class="top-tips1">
  6. 					<view>请将正对手机，头部匹配摄像区域</view>
  7. 				</view>
  8. 				<view class="top-tips2">
  9. 					为了便于识别认证，请拍摄本人头像
  10. 				</view>
  11. 			</view>
  12. 			<view class="contentV">
  13. 				<view class="mark"></view>
  14. 				<image v-if="tempImg" mode="widthFix" :src="tempImg" />
  15. 				<camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera"
  16. 					flash="off" resolution='high' />
  17. 				<view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
  18. 			</view>
  19. 			<view class="footerV">
  20. 				<view style="width: 100%;">
  21. 					<view v-if="!tempImg" style="width: 100%;">
  22. 						<view class="privacyV">
  23. 							<view class="icon"></view>
  24. 							<view class="text">
  25. 								照片隐私<text @click="handleJumpSecurityClick">安全保障</text>中…
  26. 							</view>
  27. 						</view>
  28. 						<view class="bottom-tips-2">该照片仅作为你认证的凭证</view>
  29. 						<view class="take-photo-bgV">
  30. 							<!-- 图片上传   -->
  31. 							<view v-show="true" class="btn-change-upload" @click="handleChooseImage" ></view>
  32. 							<!--拍照-->
  33. 							<view class="btn-take-photo" @click="handleTakePhotoClick" ></view>
  34. 							<!-- 切换镜头 -->
  35. 							<view class="btn-change-camera" @click="handleChangeCameraClick" ></view>
  36. 						</view>
  37. 					</view>
  38. 					<view class="confirmV" v-else>
  39. 						<view class="btn-cancel" @click="handleCancelClick">
  40. 							取消
  41. 						</view>
  42. 						<view class="btn-ok" @click="handleOkClick">
  43. 							确定
  44. 						</view>
  45. 					</view>
  46. 				</view>
  47. 			</view>
  48. 		</view>
  49. 	</view>
  50. </template>

下面是js部分   按钮都暂时用背景颜色来填充    自己更换所需要的图片哈

  1. <style lang="scss" scoped>
  2. 	.page-content {
  3. 		width: 100%;
  4. 		height: 100%;
  5. 		.containerV {
  6. 			width: 100%;
  7. 			height: 100%;
  8. 			.headerV {
  9. 				.top-tips1 {
  10. 					margin-top: 60rpx;
  11. 					color: #1C1C1C;
  12. 					font-size: 36rpx;
  13. 					text-align: center;
  14. 				}
  15. 				.top-tips2 {
  16. 					margin-top: 20rpx;
  17. 					color: #00AAFF;
  18. 					font-size: 28rpx;
  19. 					text-align: center;
  20. 				}
  21. 			}
  22. 			.contentV {
  23. 				position: relative;
  24. 				display: flex;
  25. 				flex-direction: column;
  26. 				align-items: center;
  27. 				justify-content: center;
  28. 				height: 661rpx;
  29. 				margin-top: 30rpx;
  30. 				.tipV {
  31. 					bottom: 30rpx;
  32. 					position: absolute;
  33. 					line-height: 90rpx;
  34. 					padding-left: 24rpx;
  35. 					padding-right: 24rpx;
  36. 					max-width: calc(100vw - 50rpx * 2);
  37. 					text-align: center;
  38. 					font-size: 30rpx;
  39. 					background: #000000;
  40. 					opacity: 0.75;
  41. 					color: #FFFFFF;
  42. 					border-radius: 16rpx;
  43. 					overflow: hidden;
  44. 					white-space: nowrap;
  45. 					text-overflow: ellipsis;
  46. 					z-index: 5;
  47. 				}
  48. 				.camera {
  49. 					width: 400upx;
  50. 					height: 400upx;
  51. 					border-radius: 50%;
  52. 				}
  53. 				.mark {
  54. 					position: absolute;
  55. 					left: 0;
  56. 					top: 0;
  57. 					z-index: 2;
  58. 					width: 750rpx;
  59. 					height: 100%;
  60. 					// background:deeppink;
  61. 					background-size: 750rpx 661rpx;
  62. 				}
  63. 				image {
  64. 					position: absolute;
  65. 					width: 100%;
  66. 					height: 100%;
  67. 					z-index: 3;
  68. 				}
  69. 			}
  70.  
  71. 			.footerV {
  72. 				width: 100%;
  73. 				display: flex;
  74. 				flex-direction: row;
  75. 				align-items: center;
  76. 				justify-content: center;
  77. 				.privacyV {
  78. 					padding-top: 30rpx;
  79. 					display: flex;
  80. 					flex-direction: row;
  81. 					align-items: center;
  82. 					justify-content: center;
  83. 					.text {
  84. 						font-size: 30rpx;
  85. 						color: #1C1C1C;
  86. 						text-align: center;
  87. 						line-height: 42rpx;
  88. 						margin-left: 15rpx;
  89. 						text {
  90. 							font-size: 30rpx;
  91. 							color: #00AAFF;
  92. 							text-align: center;
  93. 							line-height: 42rpx;
  94. 						}
  95. 					}
  96. 					.icon {
  97. 						width: 40rpx;
  98. 						height: 47rpx;
  99. 						background:green;
  100. 						background-size: 100% auto;
  101. 					}
  102. 				}
  103.  
  104. 				.bottom-tips-2 {
  105. 					margin-top: 20rpx;
  106. 					color: #999999;
  107. 					text-align: center;
  108. 					font-size: 26rpx;
  109. 				}
  110. 				.take-photo-bgV {
  111. 					width: 100%;
  112. 					margin-top: 30rpx;
  113. 					display: flex;
  114. 					flex-direction: row;
  115. 					align-items: center;
  116. 					justify-content: center;
  117. 					.btn-take-photo {
  118. 						margin: 0rpx 80rpx 0rpx 80rpx;
  119. 						width: 196rpx;
  120. 						height: 196rpx;
  121. 						background: yellow;
  122. 						background-size: 100% auto;
  123. 					}
  124. 					.btn-change-upload {
  125. 						left: 130rpx;
  126. 						width: 80rpx;
  127. 						height: 80rpx;
  128. 						background: blue;
  129. 						background-size: 100% auto;
  130. 					}
  131. 					.btn-change-camera {
  132. 						right: 130rpx;
  133. 						width: 80rpx;
  134. 						height: 80rpx;
  135. 						background:red;
  136. 						background-size: 100% auto;
  137. 					}
  138. 				}
  139. 				.confirmV {
  140. 					margin: 200rpx 100rpx 0rpx 100rpx;
  141. 					display: flex;
  142. 					flex-direction: row;
  143. 					align-items: center;
  144. 					justify-content: space-between;
  145. 					.btn-cancel {
  146. 						font-size: 32rpx;
  147. 						color: #1C1C1C;
  148. 					}
  149. 					.btn-ok {
  150. 						font-size: 32rpx;
  151. 						color: #00AAFF;
  152. 					}
  153. 				}
  154. 			}
  155. 		}
  156. 	}
  157. </style>

js部分，一定要注意  上传图片接收到的路径和拍照接受到的路径

  1. <script>
  2. 	export default {
  3. 		name: 'index',
  4. 		components: {
  5. 		},
  6. 		data() {
  7. 			return {
  8. 				tipsText: '', // 错误文案提示
  9. 				tempImg: '', // 本地图片路径
  10. 				BASE_API,
  11. 				cameraEngine: null, // 相机引擎
  12. 				devicePosition: false, // 摄像头朝向
  13. 				isAuthCamera: true, // 是否拥有相机权限
  14. 			}
  15. 		},
  16.  
  17. 		onLoad(options) {
  18. 			this.initData()
  19. 		},
  20. 		mounted(){
  21. 		},
  22. 		methods: {
  23. 			// 初始化相机引擎
  24. 			initData() {
  25. 				// #ifdef MP-WEIXIN
  26. 				// 1、初始化人脸识别
  27. 				wx.initFaceDetect()
  28. 				// 2、创建 camera 上下文 CameraContext 对象
  29. 				this.cameraEngine = wx.createCameraContext()
  30. 				// 3、获取 Camera 实时帧数据
  31. 				const listener = this.cameraEngine.onCameraFrame((frame) => {
  32. 					if (this.tempImg) {
  33. 						return;
  34. 					}
  35. 					// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
  36. 					wx.faceDetect({
  37. 						frameBuffer: frame.data,
  38. 						width: frame.width,
  39. 						height: frame.height,
  40. 						enablePoint: true,
  41. 						enableConf: true,
  42. 						enableAngle: true,
  43. 						enableMultiFace: true,
  44. 						success: (faceData) => {
  45. 							let face = faceData.faceInfo[0]
  46. 							if (faceData.x == -1 || faceData.y == -1) {
  47. 								this.tipsText = '检测不到人'
  48. 							}
  49. 							if (faceData.faceInfo.length > 1) {
  50. 								this.tipsText = '请保证只有一个人'
  51. 							} else {
  52. 								const {
  53. 									pitch,
  54. 									roll,
  55. 									yaw
  56. 								} = face.angleArray;
  57. 								const standard = 0.5
  58. 								if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
  59. 									Math.abs(yaw) >= standard) {
  60. 									this.tipsText = '请平视摄像头'
  61. 								} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
  62. 									0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
  63. 									face.confArray.rightEye <= 0.8) {
  64. 									this.tipsText = '请勿遮挡五官'
  65. 								} else {
  66. 									this.tipsText = '请拍照'
  67. 									// 这里可以写自己的逻辑了
  68. 								}
  69. 							}
  70. 						},
  71. 						fail: (err) => {
  72. 							if (err.x == -1 || err.y == -1) {
  73. 								this.tipsText = '检测不到人'
  74. 							} else {
  75. 								this.tipsText = err.errMsg || '网络错误，请退出页面重试'
  76. 							}
  77. 						},
  78. 					})
  79. 				})
  80. 				// 5、开始监听帧数据
  81. 				listener.start()
  82. 				// #endif
  83. 			},
  84. 			// 切换设备镜头
  85. 			handleChangeCameraClick() {
  86. 				this.devicePosition = !this.devicePosition;
  87. 			},
  88. 			// 图片上传
  89. 			handleChooseImage() {
  90. 				uni.chooseImage({
  91. 					count: 1,
  92. 					sizeType: ['original', 'compressed'],
  93. 					sourceType: ['album','camera'],
  94. 					success: (res) => {
  95. 						console.log(res,'打印res，哈哈哈哈哈')
  96. 						if (res.errMsg === 'chooseImage:ok') {
  97. 							uni.showLoading({
  98. 								title: '照片上传中...'
  99. 							})
  100. 							const tempFilePaths = res.tempFilePaths[0]
  101. 							  this.upLoad(res.tempFilePaths);
  102. 						}
  103. 					},
  104. 					fail: (res) => {
  105. 					},
  106. 				});
  107. 			},
  108.             // 拍照点击
  109. 			handleTakePhotoClick() {
  110. 				if (this.tipsText != "" && this.tipsText != "请拍照") {
  111. 					return;
  112. 				}
  113. 				uni.getSetting({
  114. 					success: (res) => {
  115. 						if (!res.authSetting['scope.camera']) {
  116. 							this.isAuthCamera = false
  117. 							uni.openSetting({
  118. 								success: (res) => {
  119. 									if (res.authSetting['scope.camera']) {
  120. 										this.isAuthCamera = true;
  121. 									}
  122. 								}
  123. 							})
  124. 						}
  125. 					}
  126. 				})
  127. 				this.cameraEngine.takePhoto({
  128. 					quality: "high",
  129. 					success: ({
  130. 						tempImagePath
  131. 					}) => {
  132. 						this.tempImg = tempImagePath
  133. 					}
  134. 				})
  135. 			},
  136. 			// 点击确定上传
  137. 			handleOkClick() {
  138.                 //  这里的 this.tempImg 是经过人脸检测后  拍照拿到的路径  
  139. 				this.upLoadOne(this.tempImg)
  140. 				uni.navigateBack({
  141. 					delta: 1
  142. 				});
  143. 			},
  144. 			upLoad(tempFilePaths) {
  145.                 // #  注意  这里上传图片拿到的tempFilePaths是一个数组啊
  146. 			    // 图片上传
  147. 			    uni.showLoading({
  148. 			        title: "上传中，请稍后...",
  149. 			    });
  150. 			    let proAll = [];
  151. 			    tempFilePaths.forEach((item) => {
  152. 					console.log(item,'打印item')
  153. 			        proAll.push(this.upLoadOne(item));
  154. 			    });
  155. 			    Promise.all(proAll).then((res) => {
  156. 			        // 上传完成
  157. 			        uni.hideLoading();
  158. 			    });
  159. 			},
  160. 			upLoadOne(imgPath) {
  161. 			    //  然后这里imgPath 传过来的是 要上传的临时本地图片的路径
  162.                 //  具体上传方法根据自己的请求方式   请求自己的接口
  163. 			},
  164. 			// 点击 - 取消上传
  165. 			handleCancelClick() {
  166. 				this.tempImg = ''
  167. 			},
  168. 			// 点击 - 人脸安全保障按钮
  169. 			handleJumpSecurityClick() {
  170. 				uni.showToast({
  171. 					icon: "none",
  172. 					title: "假装跳转人脸安全保障",
  173. 					duration: 2000,
  174. 				})
  175. 			},
  176.  
  177. 		}
  178. 	}
  179. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/318026
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号