2024年2月19日11:43:50

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"
@@ -28,11 +28,12 @@
 		<camera v-if="showStartPhoto" 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;"></canvas>
 		</view>
 
 		<view style="background-color: #A5A5A5;top: 60%;width: 100%;height: 40%;position: absolute;">
@@ -94,11 +95,14 @@
 	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 handleTouchStart = (event : TouchEvent) => {
 		console.log('手柄触摸启动', '==1')
@@ -153,19 +157,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,6 +182,43 @@
 
 	}
 
+	const getViewPosition = (src : any) => {
+		const context = uni.createCanvasContext(canvasId)
+		const query = uni.createSelectorQuery();
+		console.log('输出内容===========123')
+		// 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 坐标, 裁剪后的宽度, 裁剪后的高度);
+				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,
+						success(res : any) {
+							console.log('成功', res)
+							// res.tempFilePath 是转换后的图片路径
+							console.log(res.tempFilePath);
+							srcImg.value = res.tempImagePath
+							// showStartPhoto.value = false
+							emit('confirmReturn', res)
+						},
+						fail(err) {
+							console.error('canvasToTempFilePath failed', err);
+						}
+					})
+				});
+				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <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);
@@ -217,12 +257,6 @@
 		z-index: 2;
 	}
 
-	/* 
-	.container {
-		position: relative;
-		height: 100vh;
-	} */
-
 	/* .content {
 		position: absolute;
 		top: 50%;