2024年2月19日11:43:50

components/viewfinder.vue

@@ -22,7 +22,7 @@
 
 				</view>
 			</view>
-
+			<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%;"
@@ -33,7 +33,9 @@
 				@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
 				:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }">
 			</image> -->
-			<canvas canvas-id="canvasId" id="canvasId" style="height: 98vh;width: 100vh;"></canvas>
+			<canvas canvas-id="canvasId" id="canvasId" style="height: 98vh;width: 100vh;" @touchstart="handleTouchStart"
+				@touchmove="handleTouchMove" @touchend="handleTouchEnd"
+				:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }"></canvas>
 		</view>
 
 		<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
@@ -56,7 +58,9 @@
 
 <script setup lang="ts">
 	import {
-		ref
+		ref,
+		getCurrentInstance,
+		onMounted
 	} from 'vue'
 
 	let prop = defineProps({
@@ -103,6 +107,31 @@
 	const dragging = ref(false);
 	const canvasId = 'canvasId';
 	const targetView = ref();
+	const currentInstance = ref();
+
+	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();
+		}
+	})
 
 	const handleTouchStart = (event : TouchEvent) => {
 		console.log('手柄触摸启动', '==1')
@@ -183,12 +212,10 @@
 	}
 
 	const getViewPosition = (src : any) => {
-		const context = uni.createCanvasContext(canvasId)
-		const query = uni.createSelectorQuery();
-		console.log('输出内容===========123')
+		const context = uni.createCanvasContext(canvasId, currentInstance.value)
+		const query = uni.createSelectorQuery().in(currentInstance.value)
 		// query.in(this)
 		query.select('.container').boundingClientRect((rect : any) => {
-			console.log(rect, '==========', targetView.value)
 			if (rect) {
 				// showStartPhoto.value = false
 				// canvas.drawImage(img, 起始 x 坐标, 起始 y 坐标, 宽度, 高度, 绘制到 Canvas 的起始 x 坐标, 绘制到 Canvas 的起始 y 坐标, 裁剪后的宽度, 裁剪后的高度);
@@ -196,18 +223,25 @@
 				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
+							// srcImg.value = res.tempImagePath
 							// showStartPhoto.value = false
+							res.tempImagePath = res.tempFilePath
 							emit('confirmReturn', res)
 						},
 						fail(err) {
 							console.error('canvasToTempFilePath failed', err);
 						}
-					})
+					}, currentInstance.value)
 				});
 				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
 				console.log('视图的位置信息：', rect);
@@ -221,12 +255,44 @@
 
 	//成功
 	function success() {
-		console.log('图片地址', srcImg.value);
-		emit('confirmReturn', {
-			tempImagePath: srcImg.value
+		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 boundingClientRect(fun : any) {
+		const query = uni.createSelectorQuery().in(currentInstance.value)
+		query.select('.container').boundingClientRect((rect : any) => {
+			if (rect) {
+				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
+				console.log('视图的位置信息：', rect);
+				console.log('视图的 x 坐标：', rect.left);
+				console.log('视图的 y 坐标：', rect.top);
+				console.log('视图的宽度：', rect.width);
+				console.log('视图的高度：', rect.height);
+				fun(rect)
+			}
+		}).exec();
+	}
+
 	//重新拍摄
 	function camera() {
 		emit('camera')

subpackage/orders/car-release.vue

@@ -565,59 +565,61 @@
 		state.changeColor = true;
 		state.phoneType = 0
 		state.isTakePhotoModeShow = false
-		uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
-			// uploadFile(val.tempImagePath, state.choiceIndex, ocrAllQuery).then((data) => {
-			console.log('输出内容=====================', state.choiceIndex)
-			if (state.choiceIndex === "3") {
-				if (data.plate_a.length > 8) {
-					state.form.vehicleIdNum = data.plate_a.substring(0, 8);
-				} else {
-					state.form.vehicleIdNum = data.plate_a;
-				}
-				state.form.man = data.man;
-				state.form.vehicleType = data.vehicle;
-				state.form.character = data.character;
-				state.form.vin = data.vin;
-				state.form.engineNum = data.engine;
-				state.form.register = data.register;
-				state.form.issueDate = data.issue;
-				state.form.vehPosImgUrl = data.imageUrl;
-				state.form.vehicleModel = data.model;
-
-			} else {
-				state.form.approvedCount = data.apc;
-				state.form.approvedCountShow = data.apc;
-				state.form.maintenaceMass = data.unladen;
-				state.form.maintenaceMassShow = data.unladen;
-				// 91接口差
-				// // #ifdef MP-WEIXIN
-				// state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
-				// // #endif
-				// // #ifdef MP-ALIPAY
-				// state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
-				// // #endif
-
-				// let arr = data.overall.split("×");
-				// #ifdef MP-WEIXIN
-				state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
-				// #endif
-				// #ifdef MP-ALIPAY
-				state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
-				// #endif
-
-				let arr = data.overall.split("x");
-				state.outlineL = arr[0]; //外廓 长
-				state.outlineW = arr[1]; //外廓 宽
-				state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
-				state.form.totalMass = data.gross;
-				state.form.totalMassShow = data.gross;
-				state.form.vehNegImgUrl = data.imageUrl;
-				state.form.permittedWeight = data.alc ? data.alc : 0;
-				state.form.permittedTowWeight = data.towing ? data.towing : 0;
-				console.log('=====================', state.form.vehNegImgUrl, state)
-			}
-			state.isTakePhotoModeShow = false
-		})
+		console.log("图片地址val", val.tempImagePath)
+		state.form.vehPosImgUrl = val.tempImagePath
+		// uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
+		// 	// uploadFile(val.tempImagePath, state.choiceIndex, ocrAllQuery).then((data) => {
+		// 	console.log('输出内容=====================', state.choiceIndex)
+		// 	if (state.choiceIndex === "3") {
+		// 		if (data.plate_a.length > 8) {
+		// 			state.form.vehicleIdNum = data.plate_a.substring(0, 8);
+		// 		} else {
+		// 			state.form.vehicleIdNum = data.plate_a;
+		// 		}
+		// 		state.form.man = data.man;
+		// 		state.form.vehicleType = data.vehicle;
+		// 		state.form.character = data.character;
+		// 		state.form.vin = data.vin;
+		// 		state.form.engineNum = data.engine;
+		// 		state.form.register = data.register;
+		// 		state.form.issueDate = data.issue;
+		// 		state.form.vehPosImgUrl = data.imageUrl;
+		// 		state.form.vehicleModel = data.model;
+
+		// 	} else {
+		// 		state.form.approvedCount = data.apc;
+		// 		state.form.approvedCountShow = data.apc;
+		// 		state.form.maintenaceMass = data.unladen;
+		// 		state.form.maintenaceMassShow = data.unladen;
+		// 		// 91接口差
+		// 		// // #ifdef MP-WEIXIN
+		// 		// state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
+		// 		// // #endif
+		// 		// // #ifdef MP-ALIPAY
+		// 		// state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
+		// 		// // #endif
+
+		// 		// let arr = data.overall.split("×");
+		// 		// #ifdef MP-WEIXIN
+		// 		state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
+		// 		// #endif
+		// 		// #ifdef MP-ALIPAY
+		// 		state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
+		// 		// #endif
+
+		// 		let arr = data.overall.split("x");
+		// 		state.outlineL = arr[0]; //外廓 长
+		// 		state.outlineW = arr[1]; //外廓 宽
+		// 		state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
+		// 		state.form.totalMass = data.gross;
+		// 		state.form.totalMassShow = data.gross;
+		// 		state.form.vehNegImgUrl = data.imageUrl;
+		// 		state.form.permittedWeight = data.alc ? data.alc : 0;
+		// 		state.form.permittedTowWeight = data.towing ? data.towing : 0;
+		// 		console.log('=====================', state.form.vehNegImgUrl, state)
+		// 	}
+		// 	state.isTakePhotoModeShow = false
+		// })
 		console.log("图片地址val", val.tempImagePath)
 	}
 	const takePhotoMode = (index) => {