lilei 3 jaren geleden
bovenliggende
commit
c9c9750843
1 gewijzigde bestanden met toevoegingen van 27 en 22 verwijderingen
  1. 27 22
      pages/scan-frame/scan-frame.vue

+ 27 - 22
pages/scan-frame/scan-frame.vue

@@ -1,8 +1,10 @@
 <template>
 <template>
   <view class="cameraBg">
   <view class="cameraBg">
+	<!-- position: absolute;left: 100000px; 隐藏canvas画布 -->
 	<canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
 	<canvas style="width: 100%; height: 100vh;position: absolute;left: 100000px;" canvas-id="canvas" id="canvas"></canvas>
+	<!-- 相机组件 -->
     <camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
     <camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
-      <cover-image src="@/static/scan-frame/cameraBg.png" class="scan-img"> </cover-image>
+      <cover-image src="@/static/scan-frame/cameraBg.png" class="cover-img"> </cover-image>
       <cover-view class="scanBtn" v-if="scanShow">
       <cover-view class="scanBtn" v-if="scanShow">
         <cover-view class="beat" @click="scan">
         <cover-view class="beat" @click="scan">
           <cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
           <cover-image class="beatImg" src="@/static/scan-frame/album.png"></cover-image>
@@ -26,15 +28,14 @@
 export default {
 export default {
   data() {
   data() {
     return {
     return {
-      scanShow: true,
-	  sysinfo: null,
-	  imageInfo: null
+      scanShow: true, // 显示操作按钮
+	  sysinfo: null, // 设备信息
+	  imageInfo: null // 拍照图片信息
     }
     }
   },
   },
   onReady() {
   onReady() {
   	const sysinfo = uni.getSystemInfoSync()
   	const sysinfo = uni.getSystemInfoSync()
 	this.sysinfo = sysinfo
 	this.sysinfo = sysinfo
-	console.log(sysinfo)
   },
   },
   methods: {
   methods: {
 	// 手动输入
 	// 手动输入
@@ -59,16 +60,19 @@ export default {
 	cutImg(fileUrl){
 	cutImg(fileUrl){
 		const vm = this
 		const vm = this
 		const ctx = uni.createCanvasContext('canvas')
 		const ctx = uni.createCanvasContext('canvas')
+		// 将拍照的图片绘制到canvas,宽高等于窗口宽高和手机窗口保持一致
 		ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
 		ctx.drawImage(fileUrl,0,0,this.sysinfo.windowWidth,this.sysinfo.windowHeight)
 		ctx.draw(true,()=>{
 		ctx.draw(true,()=>{
-			const cutW = 650
-			const cutH = 160
-			const cutT = 400
-			const cutL = 50
-			const canvasW=cutW/750*this.sysinfo.windowWidth; 
-			const canvasH=cutH/1624*this.sysinfo.windowHeight; 
-			const canvasL =cutL/750*this.sysinfo.windowWidth; 
-			const canvasT= cutT/1624*this.sysinfo.windowHeight; 
+			const cutW = 650 // 裁剪框宽度
+			const cutH = 160 // 裁剪框高度
+			const cutT = 400 // 裁剪框距离顶部距离
+			const cutL = 50 // 裁剪框距离左侧距离
+			// 以上裁剪框宽高及坐标是相对于实际蒙板图片的位置
+			const canvasW=cutW/750*this.sysinfo.windowWidth; // canvas 画布实际宽度
+			const canvasH=cutH/1624*this.sysinfo.windowHeight; // canvas 画布实际高度
+			const canvasL =cutL/750*this.sysinfo.windowWidth; // canvas 画布开始坐标x
+			const canvasT= cutT/1624*this.sysinfo.windowHeight; // canvas 画布开始坐标y
+			// 开始裁剪
 			uni.canvasToTempFilePath({
 			uni.canvasToTempFilePath({
 			  x: canvasL,
 			  x: canvasL,
 			  y: canvasT,
 			  y: canvasT,
@@ -77,7 +81,7 @@ export default {
 			  canvasId: 'canvas',
 			  canvasId: 'canvas',
 			  success: function(res) {
 			  success: function(res) {
 			    // 在H5平台下,tempFilePath 为 base64
 			    // 在H5平台下,tempFilePath 为 base64
-				vm.camera64(res.tempFilePath)
+				vm.parseImgs(res.tempFilePath)
 			  } 
 			  } 
 			})
 			})
 		})
 		})
@@ -103,21 +107,21 @@ export default {
 				  // 裁剪图片
 				  // 裁剪图片
 				  vm.cutImg(imageRes.tempFilePath)
 				  vm.cutImg(imageRes.tempFilePath)
 			  }else{
 			  }else{
-				  vm.camera64(imageRes.tempFilePath)
+				  // 相册选择的图片直接解析,这里如果需要裁剪可以跳转到裁剪图片页面在继续下一步
+				  vm.parseImgs(imageRes.tempFilePath)
 			  }
 			  }
             }
             }
           })
           })
         }
         }
       })
       })
     },
     },
-    // 拿到图片开始进行识别
-    camera64(filePath) {
-		console.log(filePath)
+    // 拿到图片转base64后在开始进行识别
+    parseImgs(filePath) {
+		// 图片转base64格式
 		uni.getFileSystemManager().readFile({
 		uni.getFileSystemManager().readFile({
 		  filePath: filePath,
 		  filePath: filePath,
 		  encoding: 'base64',
 		  encoding: 'base64',
 		  success: (base) => {
 		  success: (base) => {
-			// 返回base64格式
 			const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
 			const base64Str = 'data:image/' + this.imageInfo.type + ';base64,' + base.data
 			// 拿到base64,不需要base64  就把上层的转换去掉
 			// 拿到base64,不需要base64  就把上层的转换去掉
 			this.scanShow = true
 			this.scanShow = true
@@ -126,8 +130,8 @@ export default {
 				title: '已识别到图片,看console',
 				title: '已识别到图片,看console',
 				duration: 2000
 				duration: 2000
 			});
 			});
-			console.log(base64Str,'base64Str图片')
 			// 此处为后端接口 传base64图片 进行ocr识别
 			// 此处为后端接口 传base64图片 进行ocr识别
+			// http.request()
 			uni.redirectTo({
 			uni.redirectTo({
 				url: "/pages/vinInput/confirmVin?verifyCode=123456ads11234567&filePath="+base64Str
 				url: "/pages/vinInput/confirmVin?verifyCode=123456ads11234567&filePath="+base64Str
 			})
 			})
@@ -137,8 +141,9 @@ export default {
 		  }
 		  }
 		})
 		})
     },
     },
-    // 拍照
+    // 点击开始拍照
     takePhoto() {
     takePhoto() {
+	  // 获取相机上下文对象
       const ctx = uni.createCameraContext()
       const ctx = uni.createCameraContext()
       ctx.takePhoto({
       ctx.takePhoto({
         quality: 'high',
         quality: 'high',
@@ -159,7 +164,7 @@ export default {
   width: 100%;
   width: 100%;
   height: 100vh;
   height: 100vh;
   position: fixed;
   position: fixed;
-  .scan-img {
+  .cover-img {
     width: 100%;
     width: 100%;
     height: 100vh;
     height: 100vh;
     z-index: 1;
     z-index: 1;