uniapp简单实现自定义相机功能

<template>
	<view>
		<view class="outer">
			<camera :device-position="back" flash="off" @error="error" style="width: 100%; height: 100vh;"></camera>
			<view class="confirm flex"  :style="{'padding-bottom': isIphone ? '140rpx' : '100rpx' }">
				<u-icon name="camera" color="#fff" size="30"></u-icon>
				<image class="take" src="../../../static/images/take.png" mode="" @click="takePhoto"></image>
				<u-icon name="reload" color="#fff" size="30" @click="takeback"></u-icon>
			</view>
			<u-overlay :show="show" opacity="1"></u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				isIphone:'',
				back:'back'
			};
		},
		onLoad() {
			this.isIphone = uni.getStorageSync('modelmes')
		},
		methods: {
			 takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res);
						this.show = true
						setTimeout(e=>{
							this.show = false
						},300)
					}
				});
			},
			takeback(){
				this.back == 'back' ? this.back = 'front' : this.back = 'back'
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="less">
	.outer{
		position: relative;
		height: 100vh;
	}
	.confirm{
		background: rgba(0, 0, 0, 0.9);
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding:100rpx 40rpx;
		box-sizing: border-box;
		.take{
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>