6 changed files with 572 additions and 18 deletions
Split View
Diff Options
-
+6 -0pages.json
-
+5 -1pages/index/index.vue
-
+419 -0pages/subPack/face/face.vue
-
+141 -6pages/subPack/human/human.vue
-
+0 -10utils/oss-upload/oss/index.js
-
+1 -1utils/oss-upload/oss/web.js
+ 6
- 0
pages.json
View File
+ 5
- 1
pages/index/index.vue
View File
+ 419
- 0
pages/subPack/face/face.vue
View File
| @ -0,0 +1,419 @@ | |||
| <template> | |||
| <view class="page-content"> | |||
| <view class="containerV"> | |||
| <view class="headerV"> | |||
| <view class="top-tips1"> | |||
| <view>请将正对手机，头部匹配摄像区域</view> | |||
| </view> | |||
| <view class="top-tips2"> | |||
| 为了捍卫你的不要脸，请拍摄本人头像 | |||
| </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">该照片作为你不要脸的铁证</view> | |||
| <view class="take-photo-bgV"> | |||
| <!-- 图片上传 --> | |||
| <view v-show="true" class="btn-change-upload" @click="handleChooseImage" /> | |||
| <!--拍照--> | |||
| <view class="btn-take-photo" @click="handleTakePhotoClick" /> | |||
| <!-- 切换镜头 --> | |||
| <view class="btn-change-camera" @click="handleChangeCameraClick" /> | |||
| </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> | |||
| <script> | |||
| export default { | |||
| name: 'index', | |||
| components: { | |||
| }, | |||
| data() { | |||
| return { | |||
| tipsText: '', // 错误文案提示 | |||
| tempImg: '', // 本地图片路径 | |||
| cameraEngine: null, // 相机引擎 | |||
| devicePosition: true, // 摄像头朝向 | |||
| 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 = '请拍照' | |||
| // 这里可以写自己的逻辑了 | |||
| } | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| if (err.x == -1 || err.y == -1) { | |||
| this.tipsText = '检测不到人' | |||
| } else { | |||
| this.tipsText = err.errMsg || '网络错误，请退出页面重试' | |||
| } | |||
| }, | |||
| }) | |||
| }) | |||
| // 5、开始监听帧数据 | |||
| listener.start() | |||
| // #endif | |||
| }, | |||
| // 切换设备镜头 | |||
| handleChangeCameraClick() { | |||
| this.devicePosition = !this.devicePosition; | |||
| }, | |||
| // 图片上传 | |||
| handleChooseImage() { | |||
| uni.chooseImage({ | |||
| count: 1, | |||
| sizeType: ['original', 'compressed'], | |||
| sourceType: ['album'], | |||
| success: (res) => { | |||
| if (res.errMsg === 'chooseImage:ok') { | |||
| uni.showLoading({ | |||
| title: '照片上传中...' | |||
| }) | |||
| console.log("===========:", res.tempFilePaths[0]) | |||
| this.handleOkClick() | |||
| } | |||
| }, | |||
| fail: (res) => { | |||
| }, | |||
| }); | |||
| }, | |||
| // 拍照点击 | |||
| 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 | |||
| console.log("=======tempImg:", this.tempImg) | |||
| } | |||
| }) | |||
| }, | |||
| // 点击确定上传 | |||
| handleOkClick() { | |||
| uni.showLoading({ | |||
| mask: true, | |||
| title: '校验中...' | |||
| }) | |||
| // 更新人脸识别图片请求协议：传七牛图片链接 | |||
| setTimeout(function() { | |||
| uni.hideLoading() | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "假装图片上传成功", | |||
| duration: 2000, | |||
| }) | |||
| }, 3000); | |||
| }, | |||
| // 点击 - 取消上传 | |||
| handleCancelClick() { | |||
| this.tempImg = '' | |||
| }, | |||
| // 点击 - 人脸安全保障按钮 | |||
| handleJumpSecurityClick() { | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "假装跳转人脸安全保障", | |||
| duration: 2000, | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </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%; | |||
| } | |||
| .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; | |||
| } | |||
| } | |||
| .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: url("@/static/face/icon_face_security.png") no-repeat; | |||
| 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: url("https://pro-file-qn.ztjy61.com/1003020211103145058685NNR9vlTm.png") no-repeat; | |||
| background-size: 100% auto; | |||
| } | |||
| .btn-change-upload { | |||
| left: 130rpx; | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| // background: url("@/static/face/icon_face_upload_picture.png") no-repeat; | |||
| background-size: 100% auto; | |||
| } | |||
| .btn-change-camera { | |||
| right: 130rpx; | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| // background: url("@/static/face/icon_face_switch_cameras.png") no-repeat; | |||
| 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> | |||