vue2-client 1.15.26 → 1.15.27

package/src/components/HeightScanner/index.vue

@@ -8,7 +8,7 @@
     @cancel="handleCancel"
     :maskClosable="false"
   >
-    <div class="scanner-container">
+    <div class="scanner-container" >
       <a-row>
         <a-space>
           <a-button type="primary" @click="capturePhoto">拍照</a-button>
@@ -19,6 +19,7 @@
           <a-button type="primary" @click="openApp">开启程序</a-button>
           <a-button v-if="showid" type="primary" @click="startReadCard">读身份证</a-button>
           <a-button v-if="showid" @click="stopReadCard">停止读卡</a-button>
+          <a-button type="primary" @click="rotateCamera">画面旋转</a-button>
         </a-space>
       </a-row>
       <a-row>
@@ -43,12 +44,15 @@
             :disabled="true"></a-textarea>
         </a-col>
         <a-col :span="24">
-          <img
-            id="cam"
-            :src="cameraurl"
-            width="100%"
-            height="540"
-            alt=""/>
+          <div
+            :style="{...heightStyle, display: 'flex', justifyContent: 'center', alignItems: 'center'}">
+            <img
+              id="cam"
+              :src="cameraurl"
+              :style="rotateStyle"
+              class="video"
+              alt=""/>
+          </div>
         </a-col>
         <a-col :span="24" v-if="showid">
           <a-form layout="horizontal">
@@ -145,9 +149,11 @@ export default {
       },
       callback: {},
       context: 0,
+      rotateAngle: 0,
       base_offset: 0,
       orgdrawwidth: 0,
       orgdrawheight: 0,
+      containerHeight: 440,
 
       CLT_MSG: {
         // 打开相机 cap:相机ID
@@ -234,8 +240,29 @@ export default {
       }
     }
   },
-
+  computed: {
+    rotateStyle () {
+      return {
+        transform: `rotate(${this.rotateAngle}deg)`,
+        transition: 'transform 0.5s ease',
+        maxHeight: `${this.rotateAngle % 180 === 0 ? '440px' : '660px'}`
+      }
+    },
+    heightStyle () {
+      return {
+        width: '100%',
+        height: `${this.containerHeight}px`,
+      }
+    }
+  },
   methods: {
+    rotateCamera () {
+      console.log('>>> 旋转镜头')
+      // 每次点击增加 90 度，超过 360 度时归零
+      this.rotateAngle = (this.rotateAngle + 90) % 360
+      // 根据旋转角度设置不同的高度
+      this.containerHeight = this.rotateAngle % 180 === 0 ? 440 : 660
+    },
     // handleImgError (e) {
     //   e.target.style.display = 'none'
     // },
@@ -419,14 +446,20 @@ export default {
         return
       }
       const param = {
-        camidx: camidx
+        camidx: camidx,
+        image_process_info: {
+          cut_type: '0',
+          multi_object: '0',
+          rotate: `${this.rotateAngle}`,
+        },
       }
       const msg = await this.newInstancePost('http://127.0.0.1:38088/video=grabimage', param)
       if (msg.data.code != '0') {
         this.$message.info(msg.data.message)
         return
       }
-      this.previewImage = 'data:image/jpg;base64,' + msg.data.photoBase64
+      console.log('msg========================>', msg)
+      this.previewImage = 'data:image/jpg;base64,' + msg.data.images[0].base64
       this.output('base64 长度 : ' + this.previewImage)
       this.$emit('photo-finish', { img: this.previewImage })
       this.name = ''
@@ -569,3 +602,14 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.video {
+  width: 70%;
+  height: 440px;
+  display: flex;
+  flex-direction: column;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>