uni-app自定义摄像头拍照添加人物框

Posted 2021-11-07 前端纸飞机

一、效果

效果种包含相册选择，拍照，切换摄像头。

二、知识预备

需要用到uni的以下几个组件：

1、camera

地址：https://uniapp.dcloud.io/component/camera

2、cover-image

地址：https://uniapp.dcloud.io/component/cover-view?id=cover-image

三、思考和方法

思考

我实在新页面调用的摄像头拍照，那我拍了照片后怎么把数据带回原来的页面？

方法

vuex + onShow

四、代码

<template>
	<view class="content" v-if="showHeader"
		style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
		<camera :binderror="handleCameraError" :device-position="devicePosition" flash="off"
			style="width: 100%; height: 80vh;">
			<cover-image src="https://img-blog.csdnimg.cn/20210126152753150.png"
				style="width: 100%;height: 700rpx;margin-top:100rpx;"></cover-image>

		</camera>
		<view class="btns" style="width: 100%;height: 20vh;background: #3B4144;">
			<image class="item" @tap="chooseImage" src="../../static/write/photo.png"></image>
			<image class="item" @tap="takePhotoByHead" src="../../static/write/camare.png"></image>
			<image class="item" @tap="reverseCamera" src="../../static/write/change.png"></image>
		</view>
		<!-- <view class="error-handler" v-if="!authCamera">
			<button class="nobtn" openType="openSetting">打开相机授权</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authCamera: false,
				showHeader: true,
				ctxHeader: null,
				devicePosition:'front'
			}
		}, 
		watch:{
			showHeader(val){
				console.log(val)
				return
				var that = this;
				//获取相机权限
				uni.getSetting({
					success(res) {
						console.log('相机权限:', res)
						if (res.authSetting["scope.camera"]) {
							that.authCamera = true
						} else {
							that.authCamera = false
							// uni.showModal({
							// 	title: '权限申请',
							// 	content: '需要摄像头权限，以拍摄照片。',
							// 	success: (btn_res) => {
							// 		if (btn_res.confirm) {
							// 			uni.authorize({
							// 				scope: 'scope.camera',
							// 				success() {
							// 					that.authCamera = true
							// 				}
							// 			})
							// 		} else if (btn_res.cancel) {
				
							// 		}
							// 	}
							// });
						}
					}
				})
			}
		},
		onShow() {
			var that = this;
			//获取相机权限
			uni.getSetting({
				success(res) {
					console.log('相机权限:', res)
					if (res.authSetting["scope.camera"]) {
						that.authCamera = true
					} else {
						that.authCamera = false
						// uni.showModal({
						// 	title: '权限申请',
						// 	content: '需要摄像头权限，以拍摄照片。',
						// 	success: (btn_res) => {
						// 		if (btn_res.confirm) {
						// 			uni.authorize({
						// 				scope: 'scope.camera',
						// 				success() {
						// 					that.authCamera = true
						// 				}
						// 			})
						// 		} else if (btn_res.cancel) {

						// 		}
						// 	}
						// });
					}
				}
			})
		},
		onLoad() {
			// console.log(window.innerHeight)
			// if (uni.createCameraContext) {
			// 	setTimeout(() => {
			// 		this.cameraContext = uni.createCameraContext();
			// 	}, 200)
			// } else {
			// 	// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			// 	})
			// }
		},
		methods: {
			chooseImage(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
						this.newPath = res.tempFilePaths[0]
						console.log(this.newPath)
						this.$store.commit('set_photo', this.newPath)
						uni.navigateBack({
						    delta: 1
						});
				    }
				});
			},
			//拍摄头像
			takePhotoByHead() {
				this.showHeader = true //开启拍照
				this.ctxHeader = uni.createCameraContext();
				this.ctxHeader.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res)
						uni.compressImage({
							src: res.tempImagePath,
							quality: 90, //压缩比例
							success: ress => {
								this.newPath = ress.tempFilePath; //图片
								console.log(this.newPath)
								this.$store.commit('set_photo', this.newPath)
								uni.navigateBack({
								    delta: 1
								});
							}
						})


					}
				});
			},
			handleCameraError() {
				uni.showToast({
					title: '用户拒绝使用摄像头',
					icon: 'none'
				})
			},
			reverseCamera() {
				this.devicePosition = (("back" === this.devicePosition) ? "front" : "back")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
		background: #fff;
		box-sizing: border-box;
		height: 100%;
		width: 100vw;

		.btns {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 100rpx;
				height: 100rpx;
			}

		}
	}
</style>

以上为自定义拍照部分代码。