1

src/modules/admin/ocr/OcrTest.vue

@@ -52,9 +52,8 @@
               :src="imageUrl"
               class="avatar"
               @load="initImgSize"
-              :style="{
-                maxWidth: maxWidth + 'px',
-              }"
+              :style="initImgStyle"
+              ref="imgRef"
             />
           </div>
         </div>
@@ -74,11 +73,6 @@
           :http-request="customSubmit"
           drag
         >
-          <!-- <img
-            v-if="imageUrl"
-            :src="imageUrl"
-            class="avatar animate__animated animate__backInLeft"
-          /> -->
           <i class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </div>
@@ -146,6 +140,8 @@ export default {
       },
       maxWidth: 0,
       maxHeight: 0,
+      initImgStyle: {},
+      initTransform: "translate(-50%, -50%)",
     };
   },
   computed: {
@@ -159,9 +155,48 @@ export default {
       this.maxWidth = this.$refs.dragOuter.offsetWidth - 40;
       this.maxHeight = this.$refs.dragOuter.offsetHeight - 40;
       this.scale = 1;
+      const naturalWidth = this.$refs.imgRef.naturalWidth;
+      const naturalHeight = this.$refs.imgRef.naturalHeight;
+      const wrapperRatio = this.maxWidth / this.maxHeight;
+      const imgRatio = naturalWidth / naturalHeight;
+
+      if (wrapperRatio >= imgRatio) {
+        //高度撑满
+        if (this.maxHeight < naturalHeight) {
+          this.initImgStyle = {
+            maxWidth: this.maxWidth + "px",
+          };
+          this.$refs.centerBox.style.transform = `translate(-50%, 0%) scale(1)`;
+          this.$refs.centerBox.style.top = `0`;
+          this.$refs.centerBox.style.left = `50%`;
+          this.initTransform = `translate(-50%, 0%)`;
+        } else {
+          this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(1)`;
+          this.$refs.centerBox.style.top = `50%`;
+          this.$refs.centerBox.style.left = `50%`;
+          this.initTransform = `translate(-50%, -50%)`;
+        }
+      } else {
+        //宽度撑满
+        if (this.maxWidth < naturalWidth) {
+          this.initImgStyle = {
+            maxHeight: this.maxHeight + "px",
+          };
+          this.$refs.centerBox.style.transform = `translate(0, -50%) scale(1)`;
+          this.$refs.centerBox.style.top = `50%`;
+          this.$refs.centerBox.style.left = `0`;
+          this.initTransform = `translate(0, -50%)`;
+        } else {
+          this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(1)`;
+          this.$refs.centerBox.style.top = `50%`;
+          this.$refs.centerBox.style.left = `50%`;
+          this.initTransform = `translate(-50%, -50%)`;
+        }
+      }
     },
     scaleDom() {
-      this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
+      this.$refs.centerBox.style.transform =
+        this.initTransform + ` scale(${this.scale})`;
     },
     scaleHandle(e, isBtn) {
       let dy = isBtn ? e : -e.deltaY || e.wheelDeltaY;