ai识别图片拖拽和缩放

src/modules/admin/ocr/OcrTest.vue

@@ -11,8 +11,43 @@
     :title="'OCR测试 - ' + curRow.name"
   >
     <div class="body">
-      <div class="left" v-loading="loading">
+      <div class="left" v-loading="loading" ref="dragOuter">
+        <div
+          class="drag-wrap"
+          ref="wrapper"
+          v-if="imageUrl"
+          @wheel.prevent="scaleHandle($event)"
+        >
+          <el-upload
+            class="reset"
+            ref="uploadButton"
+            action=""
+            :show-file-list="false"
+            :on-success="handleSuccess"
+            :before-upload="beforeUpload"
+            accept="image/*"
+            :auto-upload="false"
+            :multiple="false"
+            :on-change="onChange"
+            :http-request="customSubmit"
+          >
+            <el-button type="primary" size="mini">重新上传</el-button>
+          </el-upload>
+          <div class="box" ref="centerBox" @mousedown="dragstart($event)">
+            <img
+              :src="imageUrl"
+              class="avatar"
+              @load="initImgSize"
+              :style="{
+                maxWidth: maxWidth + 'px',
+                maxHeight: maxHeight + 'px',
+              }"
+            />
+          </div>
+        </div>
+
         <el-upload
+          v-else
           ref="upload"
           action=""
           class="avatar-uploader"
@@ -26,12 +61,12 @@
           :http-request="customSubmit"
           drag
         >
-          <img
+          <!-- <img
             v-if="imageUrl"
             :src="imageUrl"
             class="avatar animate__animated animate__backInLeft"
-          />
-          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          /> -->
+          <i class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </div>
       <div class="right">
@@ -85,6 +120,19 @@ export default {
       key: "",
       timer: null,
       index: 0,
+
+      scale: 1,
+      scaleNum: 0.2, // 缩放比例
+      scaleMax: 3, // 最大缩放比例
+      scaleMin: 0.1, // 最小缩放比例
+      dragData: {
+        x: 0, // 拖拽初始化时的x坐标
+        y: 0, // 拖拽初始化时的y坐标
+        left: 0, // 拖拽结束时的x偏移量
+        top: 0, // 拖拽结束时的y偏移量
+      },
+      maxWidth: 0,
+      maxHeight: 0,
     };
   },
   computed: {
@@ -92,7 +140,62 @@ export default {
       return `应用nginx配置-${this.app.name}`;
     },
   },
+  mounted() {},
   methods: {
+    initImgSize() {
+      this.maxWidth = this.$refs.dragOuter.offsetWidth - 40;
+      this.maxHeight = this.$refs.dragOuter.offsetHeight - 40;
+    },
+    scaleDom() {
+      this.$refs.centerBox.style.transform = `translate(-50%, -50%) scale(${this.scale})`;
+    },
+    scaleHandle(e) {
+      let dy = -e.deltaY || e.wheelDeltaY;
+      if (dy < 0) {
+        this.scale -= this.scaleNum;
+      } else {
+        this.scale += this.scaleNum;
+      }
+      if (this.scale >= this.scaleMax) {
+        this.scale = this.scaleMax;
+        return;
+      }
+      if (this.scale <= this.scaleMin) {
+        this.scale = this.scaleMin;
+        return;
+      }
+      this.$refs.centerBox.style.transition = "none";
+      this.scaleDom();
+      return false;
+    },
+    dragstart(e) {
+      this.$refs.centerBox.style.transition = "none";
+      e.preventDefault();
+      this.dragData.x = e.pageX - this.$refs.centerBox.offsetLeft;
+      this.dragData.y = e.pageY - this.$refs.centerBox.offsetTop;
+
+      // 给 document 添加鼠标移动事件
+      document.addEventListener("mousemove", move);
+      const _this = this;
+      function move(event) {
+        // 计算元素的位置
+        _this.dragData.left = event.pageX - _this.dragData.x;
+        _this.dragData.top = event.pageY - _this.dragData.y;
+        // 边界判断可以在这里添加 ↓
+
+        // 设置元素的位置
+        _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+        _this.$refs.centerBox.style.top = _this.dragData.top + "px";
+      }
+      // 添加鼠标抬起事件，鼠标抬起，将事件移除
+      document.addEventListener("mouseup", function () {
+        document.removeEventListener("mousemove", move);
+      });
+      // 鼠标离开父级元素，把事件移除
+      document.addEventListener("mouseout", function () {
+        document.removeEventListener("mousemove", move);
+      });
+    },
     async visibleChange(visible) {
       this.file = null;
       this.imageUrl = "";
@@ -118,7 +221,24 @@ export default {
       return isLt20M;
     },
     submit() {
-      this.$refs.upload.submit();
+      // this.$refs.upload.submit();
+      this.resultText = "";
+      this.key = Math.random() + "";
+      this.loading = true;
+      orgTestApi({
+        id: this.curRow.id,
+        type: this.type,
+        image: this.file,
+      })
+        .then((res) => {
+          if (res && res.text) {
+            let initText = (res.text || "").replaceAll(/\n/g, "<br />");
+            this.writing(initText, this.key);
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     customSubmit(option) {
       this.resultText = "";
@@ -207,6 +327,40 @@ export default {
       }
       .left {
         padding: 20px;
+
+        .drag-wrap {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          &:hover {
+            .reset {
+              // display: block;
+              opacity: 1;
+            }
+          }
+          .reset {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            z-index: 10000;
+            // display: none;
+            transition: all 0.3s;
+            opacity: 0;
+          }
+          .box {
+            user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            & > img {
+              // max-width: none;
+              // max-height: none;
+            }
+          }
+        }
+
         .avatar-uploader {
           width: 100%;
           height: 100%;
@@ -226,8 +380,11 @@ export default {
             align-items: center;
           }
           & .avatar {
-            max-width: 100%;
-            max-height: 100%;
+            // max-width: 100%;
+            // max-height: 100%;
+            user-select: none;
+            width: 100%;
+            height: 100%;
             display: block;
           }
         }