CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求

src/components/CameraGuide.vue

@@ -2,8 +2,6 @@
   <div class="cameraGuide" v-if="visible">
     <!-- ===== 拍摄引导页 ===== -->
     <div class="cameraPage" v-show="step==='guide'">
-      <video ref="video" class="cameraVideo" autoplay playsinline muted></video>
-
       <div class="cameraNav">
         <van-icon name="arrow-left" class="backBtn" @click="handleClose" />
         <span class="navTitle">{{ navTitle }}</span>
@@ -34,6 +32,8 @@
           <span class="corner br"></span>
           <div class="guideFrameBorder"></div>
           <div class="guideHole">
+            <!-- 相机画面仅在取景框内显示 -->
+            <video ref="video" class="cameraVideo" autoplay playsinline muted></video>
             <!-- 主页模板：标题 + 印章 -->
             <div v-if="type==='front'" class="licenseTemplate ltFrontPage">
               <div class="ltInner">
@@ -61,15 +61,6 @@
                   <div class="ltTitleLine">车辆照片</div>
                 </div>
                 <div class="ltCarOutline">
-                  <svg viewBox="0 0 140 70" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M14 46 L20 26 Q22 20 30 19 L88 16 Q96 16 102 22 L116 34 Q126 36 128 42 L128 48 Q128 52 124 52 L116 52"></path>
-                    <path d="M14 46 L14 50 Q14 52 18 52 L30 52"></path>
-                    <circle cx="42" cy="52" r="9"></circle>
-                    <circle cx="102" cy="52" r="9"></circle>
-                    <path d="M51 52 L93 52"></path>
-                    <path d="M58 19 L60 33 L34 34"></path>
-                    <path d="M92 18 L94 32 L114 33"></path>
-                  </svg>
                 </div>
               </div>
             </div>
@@ -219,10 +210,24 @@ export default {
         this.$toast('相机尚未就绪，请稍候')
         return
       }
+      // 按取景框比例（约 1.43:1）从视频中心裁剪，与框内可视区域（object-fit: cover）保持一致
+      const frameAspect = 1.43
+      const vw = video.videoWidth
+      const vh = video.videoHeight
+      let sw, sh
+      if (vw / vh > frameAspect) {
+        sh = vh
+        sw = Math.round(vh * frameAspect)
+      } else {
+        sw = vw
+        sh = Math.round(vw / frameAspect)
+      }
+      const sx = Math.round((vw - sw) / 2)
+      const sy = Math.round((vh - sh) / 2)
       const canvas = document.createElement('canvas')
-      canvas.width = video.videoWidth
-      canvas.height = video.videoHeight
-      canvas.getContext('2d').drawImage(video, 0, 0)
+      canvas.width = sw
+      canvas.height = sh
+      canvas.getContext('2d').drawImage(video, sx, sy, sw, sh, 0, 0, sw, sh)
       const dataURL = canvas.toDataURL('image/jpeg', 0.92)
       canvas.toBlob(blob => {
         if (!blob) {