market-app-ui/pages/face/faceRegister.nvue

<template>
	<view class="main" id="main">
		<epii-camera ref="camera" class="epiiCamer" :style="{width:width,height:height}"></epii-camera>
		<cover-view>
			<image :style="{width:width,height:height}" src="../../static/sl.gif" mode="scaleToFill"></image>
		</cover-view>
	</view>
</template>
<script>
	import http from '../../common/http.js'
	export default {
		data() {
			return {
				type: 1,
				cameraId: 0,
				height: "500rpx",
				width: "750rpx",
				userId: '',
			}
		},
		onLoad(options) {
			this.type = options.type || 1;
			this.userId = uni.getStorageSync('info').id;
			this.height = uni.getSystemInfoSync().screenHeight + 'px';
			this.$nextTick(() => {
				//这里可以做打开摄像头等功能
				this.openCamera(1)
			})
		},
		beforeDestroy() {
			this.release();
		},
		mounted() {
			console.log(this.$refs.camera)
			//this.common.hidingLoading();
		},
		methods: {
			takePicture(e) {
				const that = this;
				that.$refs.camera.takePicture({
					base64: false,
					quailty: 100,
				}, function(data) {
					let img = data.img;
					that.registerFace(img);
					return
				});
			},
			registerFace(img) {
				if (!img) {
					return;
				}
				const that = this;
				uni.uploadFile({
					url: http.ip + '/sp-admin/app/AppUser/face',
					filePath: 'file://' + img,
					name: 'file',
					formData: {
						id: that.userId,
						type:that.type
					},
					header: {
						satoken: uni.getStorageSync('token')
					},
					success(resp) {
						let res = JSON.parse(resp.data);
						if (res.code == 200) {
							that.release();
							uni.showToast({
								title: that.type == 1 ? '录入成功' : '验证成功'
							});
							let user = uni.getStorageSync('info');
							user.face = 1;
							uni.setStorageSync('info', user)
							setTimeout(() => {
								uni.$emit('face', true);
								uni.navigateBack();
								uni.hideLoading();
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
							setTimeout(function() {
								that.takePicture();
							}, 800);
						}

					}
				})
			},
			release() {
				this.$refs.camera.release();
			},
			openCamera(id) {
				if (uni.getSystemInfoSync().platform === "ios") {
					let that = this;
					this.$refs.camera.openCamera({
						cameraId: id,
					}, function(data) {
						setTimeout(function() {
							that.takePicture();
						}, 1000);
					});
				} else {
					//android 系统需要考虑 组件的宽高 和摄像头的宽高比例，如果不一致会导致拉伸
					this.openCamera_1(id);
				}
			},
			openCamera_1(id) {
				//安卓解决拉伸问题，一般有两种思路。
				//1. 组件宽高不变，找出最适合的分辨比率
				//2. 根据摄像头的分辨率，来重新修改组件的宽和高。
				this.cid = id;
				let type = 2; //1  组件宽高不变，找出最适合的分辨比率  2根据摄像头的分辨率，来重新修改组件的宽和高。
				this.$refs.camera.getSupportedPreviewSizesByCameraId({
					cameraId: id
				}, (data) => {
					let bestHeight_index = 0;
					//方法1 组件宽高不变，找出最适合的分辨比率，这样只能减少拉伸，不能解决
					if (type == 1) {
						let r0 = (this.height * 1.0) / this.width;
						let diff = 1000;
						for (var i = 0; i < data.sizes.length; i++) {
							//找出最合适的分辨率，宽高比例尽量接近组件的（摄像头宽高是反着呢）
							let tmp = Math.abs(r0 - (data.sizes[i].width * 1.0) / data.sizes[bestHeight_index]
								.width);
							if (tmp < diff) {
								diff = tmp;
								bestHeight_index = i;
							}
						}
						//方法2 先获取摄像头 支持的分辨率，然后修改组件的大小（一般保持宽不变），这样肯定不拉伸	 
					} else if (type == 2) {
						for (var i = 0; i < data.sizes.length; i++) {
							//找出最大高度对应的分辨比率（宽高是反着呢）
							if (data.sizes[i].width > data.sizes[bestHeight_index].width) {
								bestHeight_index = i;
							}
						}
						//this.width = data.sizes[max_index].height;
						//计算出当前宽度下最适合的高度，然后修改组件的高
						/* this.height = ((data.sizes[bestHeight_index].width / (data.sizes[bestHeight_index].height *
							1.0)) * 750) + "rpx"; */
						// 3 用最大分辨比率，不考虑拉伸	
					} else if (type == 3) {
						bestHeight_index = 0; //最大的一般是第一个，你也可以遍历后找出最大分辨比率

					}
					//延迟打开摄像头，组件大小修改需要时间	
					const that = this;
					setTimeout(() => {
						this.$refs.camera.openCamera({
							cameraId: id,
							previewWidth: data.sizes[bestHeight_index].width,
							previewHeight: data.sizes[bestHeight_index].height
						}, function(data) {
							that.takePicture();
						});
					}, 500);
				});
				return;
			},
			switchCamera() {
				this.cameraId == 0 ? this.cameraId = 1 : this.cameraId = 0
				this.$refs.camera.switchCamera({
					cameraId: this.cameraId
				}, function(data) {
					uni.showModal({
						content: JSON.stringify(data)
					})
				});
			},
			start() {
				this.$refs.camera.startRecord({
					videoEncodingBitRate: 3 * 1920 * 1080
				});
			},
			stop() {
				this.$refs.camera.stopRecord(function(data) {
					//可以通过 uni.compressVideo 压缩视频 记得前缀 file://
					uni.showModal({
						content: JSON.stringify(data)
					})
				});
			},
			release() {
				this.$refs.camera.release();
			},
			flashOpen() {
				this.$refs.camera.flashOpen();
			},
			flashClose() {
				this.$refs.camera.flashClose();
			},
			changeSize() {
				//this.height = "1100rpx";

			},
			getSupportedPreviewSizes() {
				this.$refs.camera.getSupportedPreviewSizes((ret) => {
					uni.showModal({
						content: JSON.stringify(ret)
					})
				});
			}
		}
	}
</script>

<style scoped>
	.main {
		position: relative;
		width: 750rpx;
		flex: 1;
		overflow: hidden;
	}

	.operate-bg {
		width: 750rpx;
		background-color: #000000;
		position: absolute;
		left: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.operate {
		width: 140rpx;
		height: 140rpx;
		background-color: #fff;
		border-radius: 50%;
		border-width: 10rpx;
		border-style: solid;
		border-color: #453f3f;
	}

	.change {
		width: 96rpx;
		height: 96rpx;
		background-color: #453f3f;
		position: absolute;
		right: 60rpx;
		bottom: 82rpx;
		border-radius: 48rpx;
		align-items: center;
		justify-content: center;
	}

	.change-img {
		width: 56rpx;
		height: 56rpx;
	}

	.portrait-frame {
		width: 750rpx;
		flex: 1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0);
	}

	.pf-img {
		width: 633.6rpx;
		height: 582rpx;
		margin-top: -280rpx;
	}

	.epiiCamer {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>