2024年2月19日17:05:14

components/viewfinder.vue

@@ -25,7 +25,7 @@
 			<canvas canvas-id="canvasbg" id="canvasbg" style="width: 100%;height: 100%;"></canvas>
 		</view>
 		<!-- camera -->
-		<camera v-if="showStartPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;"
+		<camera v-if="startPhoto" id="camera" style="height: 70vh;width: 100vh;background-color: black;width: 100%;"
 			mode="normal" :device-position="cameraPosition" :flash="flash" @stop="cameraStop" @error="cameraError" />
 
 		<view v-if="!startPhoto" style="height: 70vh;background-color: black;">
@@ -41,14 +41,14 @@
 		<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
 			<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;">
 				<view style="flex: 1;"></view>
-				<image v-if="!showStartPhoto" @click="camera" src="/static/image/etc_bd_ocr_cancel.png"
+				<image v-if="!startPhoto" @click="camera" src="/static/image/etc_bd_ocr_cancel.png"
 					style="width: 50rpx;height: 50rpx;"></image>
 				<view style="flex: 1;"></view>
 				<image @click="takePhoto"
-					:src="showStartPhoto ? '/static/image/etc_bd_ocr_take_photo_normal.png': '/static/etc_bd_ocr_rotate.png'"
-					:style="showStartPhoto ? 'width: 140rpx;height: 140rpx;' : 'width: 80rpx;height: 80rpx;'"></image>
+					:src="startPhoto ? '/static/image/etc_bd_ocr_take_photo_normal.png': '/static/etc_bd_ocr_rotate.png'"
+					:style="startPhoto ? 'width: 140rpx;height: 140rpx;' : 'width: 80rpx;height: 80rpx;'"></image>
 				<view style="flex: 1;"></view>
-				<image v-if="!showStartPhoto" @click="success" src="/static/image/etc_bd_ocr_confirm.png"
+				<image v-if="!startPhoto" @click="success" src="/static/image/etc_bd_ocr_confirm.png"
 					style="width: 50rpx;height: 50rpx;"></image>
 				<view style="flex: 1;"></view>
 			</view>
@@ -60,7 +60,8 @@
 	import {
 		ref,
 		getCurrentInstance,
-		onMounted
+		onMounted,
+		nextTick
 	} from 'vue'
 
 	let prop = defineProps({
@@ -112,24 +113,7 @@
 	onMounted(() => {
 		currentInstance.value = getCurrentInstance()
 		if (!prop.showStartPhoto) {
-			const context = uni.createCanvasContext(canvasId, currentInstance.value)
-			const query = uni.createSelectorQuery().in(currentInstance.value)
-			// query.in(this)
-			query.select('.container').boundingClientRect((rect : any) => {
-				if (rect) {
-					uni.getImageInfo({
-						src: srcImg.value,
-						success: (imgs) => {
-							// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
-							context.drawImage(srcImg.value, rect.left, rect.top, imgs.width, imgs.height, rect.left, rect.top, rect.width, rect.height);
-							context.draw();
-						},
-						fail: (error) => {
-							console.error('获取图片信息失败', error);
-						},
-					});
-				}
-			}).exec();
+			emit('confirmReturn', { tempImagePath: prop.images })
 		}
 	})
 
@@ -217,32 +201,41 @@
 		// query.in(this)
 		query.select('.container').boundingClientRect((rect : any) => {
 			if (rect) {
-				// showStartPhoto.value = false
-				// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
-				context.drawImage(src, rect.left, rect.top, rect.width, rect.height, rect.left, rect.top, rect.width, rect.height);
-				context.draw(false, () => {
-					uni.canvasToTempFilePath({
-						canvasId: canvasId,
-						x: rect.left,
-						y: rect.top,
-						width: rect.width,
-						height: rect.height,
-						destWidth: rect.width,
-						destHeight: rect.height,
-						success(res : any) {
-							console.log('成功', res)
-							// res.tempFilePath 是转换后的图片路径
-							console.log(res.tempFilePath);
-							// srcImg.value = res.tempImagePath
-							// showStartPhoto.value = false
-							res.tempImagePath = res.tempFilePath
-							emit('confirmReturn', res)
-						},
-						fail(err) {
-							console.error('canvasToTempFilePath failed', err);
-						}
-					}, currentInstance.value)
+			
+				// 获取图片信息
+				uni.getImageInfo({
+					src: src,
+					success: (imgS) => {
+						console.log('输出内容', imgS.width, imgS.height)
+						// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
+						context.drawImage(src, rect.left + 30, rect.top + 140, rect.width * 1.8, rect.height * 1.8, rect.left, rect.top, rect.width, rect.height);
+						context.draw(false, () => {
+							uni.canvasToTempFilePath({
+								canvasId: canvasId,
+								x: rect.left,
+								y: rect.top,
+								width: rect.width,
+								height: rect.height,
+								destWidth: rect.width,
+								destHeight: rect.height,
+								success(res : any) {
+									// res.tempFilePath 是转换后的图片路径
+									console.log(res.tempFilePath);
+									res.tempImagePath = res.tempFilePath
+									emit('confirmReturn', res)
+								},
+								fail(err) {
+									console.error('canvasToTempFilePath failed', err);
+								}
+							}, currentInstance.value)
+						});
+					},
+					fail: (error) => {
+						console.error('获取图片信息失败', error);
+					},
 				});
+				
+				
 				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
 				console.log('视图的位置信息：', rect);
 				console.log('视图的 x 坐标：', rect.left);
@@ -254,28 +247,7 @@
 	};
 
 	//成功
-	function success() {
-		boundingClientRect((rect : any) => {
-			uni.canvasToTempFilePath({
-				canvasId: 'canvasId',
-				x: rect.left,
-				y: rect.top,
-				width: rect.width,
-				height: rect.height,
-				destWidth: rect.width,
-				destHeight: rect.height,
-				success(res : any) {
-					console.log('==========', res.tempFilePath);
-					emit('confirmReturn', {
-						tempImagePath: res.tempFilePath
-					})
-				},
-				fail(err) {
-					console.error('canvasToTempFilePath failed', err);
-				}
-			}, currentInstance.value)
-		})
-	}
+	function success() {}
 
 	//获取节点信息
 	function boundingClientRect(fun : any) {
@@ -313,8 +285,8 @@
 	.viewfinder {
 		pointer-events: none;
 		position: absolute;
-		top: 20%;
-		left: 10%;
+		top: 180px;
+		left: 40px;
 		width: 80%;
 		height: 400rpx;
 		border: 2px solid #fff;