photo_uniapp/pagesA/photo/cartoon_2.vue

<template>
	<view>
		<view class="content photo_back" style="background-color: #000;">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" theme="light" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'" style="width:100%;margin-left: 0;">
				<view class="photo_cartoon_2" v-if="loaded && cameraEnable">

					<camera flash="auto" :device-position="devicePosition"  @error="errorCamera"
						style="width: 100%; height: 100%;">
					</camera>

				</view>

				<view class="photo_cartoon_2" v-else style="overflow: hidden;">
					<view style="display: flex;justify-content: center;margin-top: 200rpx;overflow:hidden;">请授权使用摄像头
					</view>
				</view>

				<view class="photo_cartoon_2_2">
					<view class="photo_cartoon_2_2_1" @click="viewAlbum">
						<image src="/static/img/photo/cartoon_4.png" />
					</view>
					<view class="photo_cartoon_2_2_2" @click="takePhoto">
						<image src="/static/img/photo/cartoon_3.png" />
					</view>
					<view class="photo_cartoon_2_2_1" @click="back2front">
						<image src="/static/img/photo/cartoon_5.png" />
					</view>
				</view>

			</view>

		</view>


	</view>
</template>

<script>
	import custom_navbar from "./components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: '卡通画风',
				margin_top: 0,
				loaded: false,
				cameraEnable: true,
		
				devicePosition: "back",
				use_camera: 1,
				cameraContext: {},
				users_image:'', //拍照路径
				cartoon_id:0,
			}
		},

		onShow() {
			var _this =this;
			_this.checkAuth();
		},
		onLoad(options) {
			var _this =this;
			console.log('options',options);
			_this.cartoon_id = options.id;
			if (uni.createCameraContext) {
				this.cameraContext = uni.createCameraContext()
			} else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
		},
		methods: {
			//判断
			checkAuth() {
				var _this = this;
				console.log('已授权---');
				uni.authorize({
					scope: 'scope.camera',
					success(res) {
						console.log('已授权', res);
						_this.loaded=true;
						_this.cameraEnable=true;
					},
					fail(err) {
			
						uni.showModal({
							title: '授权失败',
							content: '请在设置界面打开摄像头相关权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting()
								}
							}
						})
					},
				})
			},
			getNavHeight(e) {
				this.margin_top += e;
			},
			goTo(url)
			{
				uni.navigateTo({
					url:url,
				})
			},
			errorCamera(e)
			{
				var _this =this;
				_this.$com.alertDo('请打开摄像头权限',function(res){
					_this.checkAuth();
				});
				
			},
			//查看相册
			viewAlbum(){
				var _this =this;
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image'],
				  sourceType: ['album'],
				  camera: 'back',
				  success(res) {
					  console.log('相册',res);
				     //console.log(res.tempFiles)
					 var  edetail= res.tempFiles[0].tempFilePath;
					 //上传
					 var upData = {filePath:edetail,fileType:'image',scene:'user_centre'};
					  _this.$api.ossUpload(upData,function(res){
					  	console.log('ossUpload success',res);
					  	var d = res.data;
					  	_this.users_image = d.file_url;
					  	uni.navigateTo({
					  		url:'/pagesA/photo/cartoon_3?cartoon_id='+_this.cartoon_id+'&users_image='+encodeURIComponent(_this.users_image),
					  	})
					  
					  	
					  },function(err){
					  	console.log('ossUpload fail',err);
					  });	
				  }
				})
			},
			//发起拍照
			takePhoto(){
				var _this =this;
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
				       quality: 'high',
				       success: (res) => {
							  console.log('拍照',res);
							  var  edetail= res.tempImagePath;
							  //上传
							  var upData = {filePath:edetail,fileType:'image',scene:'user_centre'};
							   _this.$api.ossUpload(upData,function(res){
							   	console.log('ossUpload success',res);
							   	var d = res.data;
							   	_this.users_image = d.file_url;
							   	uni.navigateTo({
							   		url:'/pagesA/photo/cartoon_3?cartoon_id='+_this.cartoon_id+'&users_image='+encodeURIComponent(_this.users_image),
							   	})
							   
							   	
							   },function(err){
							   	console.log('ossUpload fail',err);
							   });	
				              
				       }
				});
			},
			back2front()
			{
				
				var _this =this;
				if(_this.devicePosition == 'back')
				{
					_this.devicePosition = 'front';
					console.log('切换----前');
				}
				else
				{
					_this.devicePosition = 'back';
					console.log('切换----后')
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';
</style>