uni-app自定义相机

素颜马尾好姑娘i 2023-02-17 02:53 484阅读 0赞

设计思路：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4cTk4MTc5NTUxNA_size_16_color_FFFFFF_t_70][]

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画布设置到足够大，使原图片可以完全绘制进去，然后使用百分比将需要的部分摘出来。第一次做自定义相机，若有什么不对的地方，希望各位大佬及时指出。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4cTk4MTc5NTUxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611153242271.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4cTk4MTc5NTUxNA==,size_16,color_FFFFFF,t_70
[uni.getSystemInfo]: https://uniapp.dcloud.io/api/system/info?id=getsysteminfo