1

<template>
	<view class="wrap">
		<view class="camera-wrap" style="width:400rpx;height:400rpx;border-radius:50%;overflow:hidden;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);">
			<camera
				device-position="front" 
				flash="off" 
				@initdone="initdone" 
				@error="error" 
				style="width:100%;height:100%;border-radius:50%;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);"
			></camera>
		</view>
		<view class="tip">{{tip}}</view>
		<canvas v-if="canvasW && canvasH" :style="{
			width: `${canvasW}px`,
			height: `${canvasH}px`,
			marginBottom: '-10000px',
			transform: 'transLateY(10000px)',
		}" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>

<script>
import dayjs from 'dayjs'

export default {
	data() {
		return {
			idNum: '',
			username: '',
			tip: '拍摄实际用车人人脸，请确保正对手机且光线充足',
			canvasW: 0,
			canvasH: 0,
			watermark: {
				type: '',
				date: '',
				location: '',
				address: '',
			},
			
		}
	},
	onLoad(options) {
		this.idNum = options.idNum
		this.username = options.username
	},
	
	onUnload() {
		this.clearTimer()
	},
	
	methods: {
		initdone() {
			this.ctx = uni.createCameraContext()
			this.onCameraFrame()
		},
		
		
		onCameraFrame() {
				let count = 0
				let listener = this.ctx.onCameraFrame(frame => {
					if (count < 60 || this.faceAudit) {
						count++
						return
					}
					count = 0
					
					const data = new Uint8Array(frame.data)
					const clamped = new Uint8ClampedArray(data)
					
					const ctx = uni.createCanvasContext('firstCanvas')
					this.canvasW = frame.width
					this.canvasH = frame.height
					
					uni.canvasPutImageData({
					  canvasId: 'firstCanvas',
						x: 0,
						y: 0,
						width: frame.width,
						height: frame.height,
						data: clamped,
					  success: (res) => {
							ctx.beginPath()
							const fontSize = frame.width/30
							const bottom = 10
							
							ctx.setFillStyle('rgba(0,0,0,0.3)')
							ctx.fillRect(0, this.canvasH - (fontSize*4), this.canvasW, fontSize*4)
							
							ctx.setFontSize(fontSize)
							ctx.setFillStyle('white')
							ctx.fillText(this.watermark.type, 10, this.canvasH - (fontSize*2) - bottom)
							ctx.fillText(this.watermark.date, 10, this.canvasH - fontSize - bottom)
							ctx.fillText(`拍摄地址：${this.watermark.address}`, 10, this.canvasH - fontSize - bottom)
							
							ctx.draw(true, () => {
								uni.canvasToTempFilePath({
								  x: 0,
									y: 0,
									width: frame.width,
									height: frame.height,
									canvasId: 'firstCanvas',
									fileType: 'jpg',
									destWidth: frame.width,
									destHeight: frame.height,
								  success: (res) => {
										this.$getFileUpload(this.$url.upload, [res.tempFilePath]).then(upload => {
											if(upload.code == 0) {
												const imageUrl = upload.data.src
												this.$getRequest(this.$url.faceAudit, 'POST', {
													resource: 10,
													businessNode: this.businessNode,
													address: this.watermark.address,
													userCarSubscribeId: this.userCarSubscribeId,
													imageUrl,
													idNum: this.idNum,
													name: this.username,
												}).then(async result => {
													if (result.code == 0 && result.data.pass) {
														if (listener) {
															listener.stop()
															listener = null
														}
														
														this.faceAudit = true
														
														const reason = result.data.reason.split('(')
														this.tip = '认证通过'
														
														} else {
														// if (result.data && result.data.reason) {
														// 	const reason = result.data.reason.split('(')
														// 	this.tip = reason[0]
														// }
														this.tip = '抱歉，没有认出您'
														if (listener) {
															listener.stop()
															listener = null
														}
														this.onCameraFrame()
													}
												})
											} else {
												if (listener) {
													listener.stop()
													listener = null
												}
												this.onCameraFrame()
											}
										})
								  },
									fail: (res) => {
										console.log('图片生成失败', res)
										if (listener) {
											listener.stop()
											listener = null
										}
										this.onCameraFrame()
									}
								})
							})
						},
						fail: (res) => {
							console.log('调用失败', res)
							if (listener) {
								listener.stop()
								listener = null
							}
							this.onCameraFrame()
						}
					})
				})
				
				listener.start()
		},
		
		
		error(e) {
				console.log('error', e.detail);
		},
		
		clearTimer() {
			clearTimeout(this.timer)
			this.timer = null
		},
	},
}
</script>

<style lang="scss" scoped>
.wrap {
	padding: 40px 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tip {
		margin-top: 16px;
		height: 44rpx;
		font-size: 16px;
		line-height: 44rpx;
		color: rgba(10, 15, 45, 0.5);
	}
}
</style>

1