uni-app自定义相机

设计思路：

调用camera相机组件，用cover-view，cover-image标签添加自定义页面布局，拍完照之后将照片画到canvas里面，然后用canvasToTempFilePath方法导出需要的图片。

html部分

<camera device-position="back" flash="off" style='width:100%; height:100vh;'>
			<cover-view class="camera-view">
				<cover-view class="title">{{title}}</cover-view>
				<cover-image class='bgImage' src='@/static/camarebg.png'> </cover-image>
				<cover-image class='takephoto' src='@/static/btn.png' @tap="takePhoto()"> </cover-image>
			</cover-view>
		</camera>
		
		<canvas v-show='showImage' canvas-id="canvas" style='width:1000px; height:1500px;'></canvas>

调用uni-app的camera组件全屏化相机，用cover-view，cover-image标签添加自定义页面布局，同时准备一个canvas，用来处理图片，遮罩层和拍照按钮使用图片即可，canvas的大小为什么这么设置下面再讲。

data部分

data() {
			return {
				title: '',
				ctx: null,
				path: "",
				image: "",
				showImage: false
			}
		},

在onload时加载相机组件

onLoad() {  
	this.ctx = uni.createCameraContext();
},

拍照

takePhoto(){
				this.ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.imageChange(res)
					}
				});
			},

图片处理

imageChange(options) {
			    var that = this
				//原图片信息
				var _width = options.width
				var _height = options.height
			    that.path = options.tempImagePath
				
				//需要的图片信息
			    var image_x = parseInt(_width * 0.1);
			    var image_y = parseInt(_height * 0.09);
			    var image_width = parseInt(_width * 0.8);
			    var image_height = parseInt(_height * 0.87);
				
			    uni.getImageInfo({
			      src: that.path,
			      success: function(res) {
			        that.showImage = true
					//将原图画到canvas上面
			        that.canvas = uni.createCanvasContext("canvas", that)
			        that.canvas.drawImage(that.path, 0, 0, _width, _height)
			        uni.showLoading({
			          title: '数据处理中...',
			          icon: 'loading',
			          duration: 10000
			        })
			        that.canvas.draw()
			        setTimeout(function() {
					  //导出自己需要的图片
					  uni.canvasToTempFilePath({ 
			            canvasId: "canvas",
			            x: image_x, 
			            y: image_y, 
			            width: image_width, 
			            height: image_height, 
			            destWidth: image_width, 
			            destHeight: image_height, 
			            success: function(res) {
			    		  that.image = res.tempFilePath //处理好的图片
			              uni.hideLoading()
			    			 
			              //TODO........
			              
			            },
			            fail: function(e) {
			              uni.hideLoading()
			              uni.showToast({
			                title: '出错啦...',
			                icon: 'loading'
			              })
			             
			            }
			          });
			        }, 1000);
			      }
			    })
			}

拍出来的原始照片大小是根据手机屏幕的分辨率计算的，js获取到的是屏幕大小，本人也试过调用uni.getSystemInfo获取系统信息，里面并没有屏幕的分辨率大小，只有屏幕大小，所以我将canvas画布设置到足够大，使原图片可以完全绘制进去，然后使用百分比将需要的部分摘出来。第一次做自定义相机，若有什么不对的地方，希望各位大佬及时指出。