@koi-br/ocr-web-sdk 1.0.0

package/preview/ImagePreview.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    class="preview-container"
+    @wheel.prevent="handleWheel"
+  >
+    <!-- 工具栏 -->
+    <div class="preview-toolbar preview-toolbar-right">
+      <div class="toolbar-group">
+        <span class="scale-text">
+          {{ Math.round(scale * 100) }}%
+        </span>
+        <div class="toolbar-divider"></div>
+        <a-tooltip mini position="bottom" content="重置">
+          <a-button
+            size="small"
+            type="outline"
+            @click="reset"
+          >
+            <RefreshCcw :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip
+          v-if="originalId"
+          mini
+          position="bottom"
+          content="查看原图"
+        >
+          <a-button
+            size="small"
+            type="outline"
+            @click="original"
+          >
+            <Maximize2 :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip mini position="bottom" content="缩小">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale <= minScale"
+            @click="zoom(-0.1)"
+          >
+            <ZoomOut :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip mini position="bottom" content="放大">
+          <a-button
+            size="small"
+            type="outline"
+            :disabled="scale >= maxScale"
+            @click="zoom(0.1)"
+          >
+            <ZoomIn :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip
+          v-if="isDownload"
+          mini
+          position="bottom"
+          content="下载"
+        >
+          <a-button
+            size="small"
+            type="outline"
+            @click="emit('download')"
+          >
+            <Download :size="16" />
+          </a-button>
+        </a-tooltip>
+        <div class="toolbar-divider"></div>
+        <a-tooltip mini position="bottom" content="向左旋转">
+          <a-button
+            size="small"
+            type="outline"
+            @click="rotateImage('left')"
+          >
+            <RotateCw :size="16" />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip mini position="bottom" content="向右旋转">
+          <a-button
+            size="small"
+            type="outline"
+            @click="rotateImage('right')"
+          >
+            <RotateCcw :size="16" />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+
+    <div
+      class="relative w-full h-full flex items-center justify-center overflow-hidden"
+      @mousedown="startPan"
+      @mousemove="pan"
+      @mouseup="stopPan"
+      @mouseleave="stopPan"
+    >
+      <img
+        v-if="url"
+        :src="url"
+        alt="预览图片"
+        :style="{
+          transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
+          cursor: isPanning ? 'grabbing' : 'grab'
+        }"
+        @contextmenu.prevent
+        @mousedown.prevent
+        @load="onImageLoad"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, Download, Maximize2 } from 'lucide-vue-next';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  minScale: {
+    type: Number,
+    default: 0.1
+  },
+  maxScale: {
+    type: Number,
+    default: 5
+  },
+  clickStep: {
+    type: Number,
+    default: 0.25
+  },
+  wheelStep: {
+    type: Number,
+    default: 0.1
+  },
+  originalId: {
+    type: String,
+    default: ''
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['original', 'download']);
+
+const rotation = ref(0);
+const scale = ref(1);
+const position = ref({ x: 0, y: 0 });
+const isPanning = ref(false);
+const lastPosition = ref({ x: 0, y: 0 });
+
+const rotateImage = direction => {
+  if (direction === 'left') {
+    rotation.value = (rotation.value - 90) % 360;
+  } else {
+    rotation.value = (rotation.value + 90) % 360;
+  }
+};
+
+const zoom = (delta, isWheel = false) => {
+  const step = isWheel ? props.wheelStep : props.clickStep; // 滚轮缩放使用更小的步长
+  const newScale = scale.value + delta * step;
+  if (newScale <= props.minScale) {
+    scale.value = props.minScale;
+  } else if (newScale >= props.maxScale) {
+    scale.value = props.maxScale;
+  } else {
+    scale.value = newScale;
+  }
+};
+
+const handleWheel = e => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? -1 : 1;
+  zoom(delta, true);
+};
+
+const startPan = e => {
+  if (e.button !== 0) return;
+  isPanning.value = true;
+  lastPosition.value = { x: e.clientX, y: e.clientY };
+};
+
+const pan = e => {
+  if (!isPanning.value) return;
+
+  const deltaX = e.clientX - lastPosition.value.x;
+  const deltaY = e.clientY - lastPosition.value.y;
+
+  position.value = {
+    x: position.value.x + deltaX,
+    y: position.value.y + deltaY
+  };
+
+  lastPosition.value = { x: e.clientX, y: e.clientY };
+};
+
+const stopPan = () => {
+  isPanning.value = false;
+};
+
+const reset = () => {
+  rotation.value = 0;
+  scale.value = 1;
+  position.value = { x: 0, y: 0 };
+};
+
+const original = () => {
+  emit('original');
+};
+
+defineExpose({
+  reset
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+.preview-container .relative {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+</style>