图片裁剪页面加入自定义尺寸,7305修改发送文字和图片的方式

pages/6155/ImgCrop.vue

@@ -1,9 +1,9 @@
 <template>
 	<view>
-		<canvas  id="splashCanvas" canvas-id="splashCanvas"  style="width: 160px; height: 80px; z-index: 9999;position: fixed; visibility: hidden;"></canvas>
+		<canvas  id="splashCanvas" canvas-id="splashCanvas" :style="{'width':width+'px','height':height+'px'}"  style=" z-index: 9999;position: fixed; visibility: hidden;"></canvas>
 
 
-			<qf-image-cropper :src="src" :showAngle="false" :width="1600" :height="800" fileType="jpg"
+			<qf-image-cropper :src="src" :showAngle="false" :width="cropWidth" :height="cropHeight" fileType="jpg"
 				@crop="handleCrop" :gpu="true">
 			</qf-image-cropper>
 	</view>
@@ -18,17 +18,29 @@
 		data() {
 			return {
 				src: "",
-				Statu: false
+				Statu: false,
+				width:160,
+				height:80
 
 			}
 		},
+		computed:{
+			cropWidth(){
+				return this.width*10;
+			}
+			,
+			cropHeight(){
+				return this.height*10;
+			}
+		},
 		onLoad: function(option) {
 			const eventChannel = this.getOpenerEventChannel();
 			var these = this;
-			eventChannel.on('checkImg', (data)=> {
-				console.log("我收到你的消息了，消息内容是：" + JSON.stringify(data));
-				this.src = data.data;
-				console.log("我收到你的消息了，消息内容是：",data);
+			eventChannel.on('checkImg', (rec)=> {
+				console.log("我收到你的消息了，消息内容是：" + JSON.stringify(rec));
+				this.src = rec.data;
+				this.width=rec.width?rec.width:160;
+				this.height=rec.height?rec.height:80;
 			})
 		},
 		methods: {
@@ -43,7 +55,7 @@
 				const ctx = uni.createCanvasContext('splashCanvas', this);
 				ctx.drawImage(
 					e.tempFilePath,
-					0,0,160,80
+					0,0,these.width,these.height
 				);
 				setTimeout(() => {
 					ctx.draw(false, ()=>{
@@ -52,8 +64,8 @@
 							canvasId: 'splashCanvas',
 							x: 0,
 							y: 0,
-							width: 160,
-							height: 80,
+							width: these.width,
+							height: these.height,
 							success: (res) => {
 								// 处理像素数据并发送
 								
@@ -81,8 +93,7 @@
 
 <style>
 	.canvas {
-		width: 1600px;
-		height: 800px;
+	
 		border: 1px solid #ccc;
 	}
 </style>