提交

components/viewfinder.vue

@@ -1,6 +1,6 @@
 <template>
 	<view style="width: 100%;height: 100vh;position: fixed;left: 0;top:0;z-index: 111111;">
-		<view class="viewfinder">
+		<view ref="targetView" class="container viewfinder">
 			<view v-if="phoneType == 1"
 				style="display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 100%;">
 				<image src="/static/image/etc_bd_ocr_id_card_locator_front.png"
@@ -22,30 +22,33 @@
 
 				</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%;"
+		<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="!showStartPhoto" style="height: 70vh;background-color: black;">
-			<image style="position: absolute;top: 20%;left: 10%;touch-action: none;" :src="srcImg"
+		<view v-if="!startPhoto" style="height: 70vh;background-color: black;">
+			<!-- 		<image style="position: absolute;top: 20%;left: 10%;touch-action: none;" :src="srcImg"
 				@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
 				:style="{ transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotateDegree}deg) scale(${scale})`, transition: 'transform ' + transitionDuration + 's' }">
-			</image>
+			</image> -->
+			<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;">
 			<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>
@@ -55,7 +58,10 @@
 
 <script setup lang="ts">
 	import {
-		ref
+		ref,
+		getCurrentInstance,
+		onMounted,
+		nextTick
 	} from 'vue'
 
 	let prop = defineProps({
@@ -94,11 +100,22 @@
 	let touchMoveDistance = ref(0)
 	let scale = ref(1)
 	let transitionDuration = ref(0)
+	let startPhoto = ref(prop.showStartPhoto)
 	const startX = ref(0);
 	const startY = ref(0);
 	const offsetX = ref(0);
 	const offsetY = ref(0);
 	const dragging = ref(false);
+	const canvasId = 'canvasId';
+	const targetView = ref();
+	const currentInstance = ref();
+
+	onMounted(() => {
+		currentInstance.value = getCurrentInstance()
+		if (!prop.showStartPhoto) {
+			emit('confirmReturn', { tempImagePath: prop.images })
+		}
+	})
 
 	const handleTouchStart = (event : TouchEvent) => {
 		console.log('手柄触摸启动', '==1')
@@ -153,19 +170,18 @@
 			cameraContext = uni.createCameraContext();
 			// #endif
 			// #ifdef MP-ALIPAY
-			cameraContext = my.createCameraContext('camera');
+			cameraContext = uni.createCameraContext('camera');
 			// #endif
 			// 调用拍照方法
 			cameraContext.takePhoto({
 				quality: 'normal',
-				success: (res) => {
+				success: (res : any) => {
 					// 在这里处理拍照成功后的逻辑，res.tempImagePath 为拍照的图片路径
-					console.log('拍照成功:', res.tempImagePath);
-					srcImg.value = res.tempImagePath
-					// showStartPhoto.value = false
+					// srcImg.value = res.tempImagePath
+					startPhoto.value = false
 					cameraContext.stopRecord();
-					emit('confirmReturn', res)
-					console.log("1111")
+					getViewPosition(res.tempImagePath)
+					console.log('拍照成功:', res.tempImagePath);
 				},
 				fail: (error) => {
 					console.error('拍照失败:', error);
@@ -179,12 +195,74 @@
 
 	}
 
+	const getViewPosition = (src : any) => {
+		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: 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);
+				console.log('视图的 y 坐标：', rect.top);
+				console.log('视图的宽度：', rect.width);
+				console.log('视图的高度：', rect.height);
+			}
+		}).exec();
+	};
+
 	//成功
-	function success() {
-		console.log('图片地址', srcImg.value);
-		emit('confirmReturn', {
-			tempImagePath: srcImg.value
-		})
+	function success() { }
+
+	//获取节点信息
+	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();
 	}
 
 	//重新拍摄
@@ -207,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;
@@ -217,12 +295,6 @@
 		z-index: 2;
 	}
 
-	/* 
-	.container {
-		position: relative;
-		height: 100vh;
-	} */
-
 	/* .content {
 		position: absolute;
 		top: 50%;