@koi-br/ocr-web-sdk 1.0.13 → 1.0.15

package/preview/tifPreview.vue

@@ -1,363 +1,447 @@
-<template>
-  <div class="preview-container" @wheel.prevent="handleWheel">
-    <div v-if="isLoading" class="loading-container">
-      <div>正在加载TIFF文件...</div>
-    </div>
-    <div v-else-if="error" class="preview-error-container">
-      <div>{{ error }}</div>
-    </div>
-    <div v-else class="img-container">
-      <!-- 工具栏 -->
-      <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>
-          <ATooltip mini position="bottom" content="重置">
-            <AButton
-              size="small"
-              type="outline"
-              @click="reset"
-            >
-              <RefreshCcw :size="16" />
-            </AButton>
-          </ATooltip>
-          <ATooltip
-            v-if="originalId"
-            mini
-            position="bottom"
-            content="查看原图"
-          >
-            <AButton
-              size="small"
-              type="outline"
-              @click="original"
-            >
-              <Maximize2 :size="16" />
-            </AButton>
-          </ATooltip>
-          <ATooltip mini position="bottom" content="缩小">
-            <AButton
-              size="small"
-              type="outline"
-              :disabled="scale <= minScale"
-              @click="zoom(-0.1)"
-            >
-              <ZoomOut :size="16" />
-            </AButton>
-          </ATooltip>
-          <ATooltip mini position="bottom" content="放大">
-            <AButton
-              size="small"
-              type="outline"
-              :disabled="scale >= maxScale"
-              @click="zoom(0.1)"
-            >
-              <ZoomIn :size="16" />
-            </AButton>
-          </ATooltip>
-          <ATooltip
-            v-if="isDownload"
-            mini
-            position="bottom"
-            content="下载"
-          >
-            <AButton
-              size="small"
-              type="outline"
-              @click="emit('download')"
-            >
-              <Download :size="16" />
-            </AButton>
-          </ATooltip>
-          <div class="toolbar-divider"></div>
-          <ATooltip mini position="bottom" content="向左旋转">
-            <AButton
-              size="small"
-              type="outline"
-              @click="rotateImage('left')"
-            >
-              <RotateCw :size="16" />
-            </AButton>
-          </ATooltip>
-          <ATooltip mini position="bottom" content="向右旋转">
-            <AButton
-              size="small"
-              type="outline"
-              @click="rotateImage('right')"
-            >
-              <RotateCcw :size="16" />
-            </AButton>
-          </ATooltip>
-        </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
-          ref="imgRef"
-          :src="imgDataUrl"
-          alt="TIFF Preview"
-          class="w-full"
-          :style="{
-            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
-            cursor: isPanning ? 'grabbing' : 'grab'
-          }"
-          @load="onImageLoad"
-          @error="onImageError"
-          @contextmenu.prevent
-          @mousedown.prevent
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
-import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2 } from 'lucide-vue-next';
-import { Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
-
-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(['load', 'error', 'original', 'download']);
-
-const isLoading = ref(false);
-const error = ref('');
-const imgDataUrl = ref('');
-const imgRef = ref(null);
-
-// 缩放、旋转和拖拽相关状态
-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');
-};
-
-// 清理资源
-const cleanup = () => {
-  if (imgDataUrl.value) {
-    // 释放blob URL
-    if (imgDataUrl.value.startsWith('blob:')) {
-      URL.revokeObjectURL(imgDataUrl.value);
-    }
-    imgDataUrl.value = '';
-  }
-  error.value = '';
-  // 重置缩放和位置
-  reset();
-};
-
-// 加载TIFF文件
-const loadTiff = async () => {
-  if (!props.url) return;
-  cleanup();
-  isLoading.value = true;
-  error.value = '';
-  try {
-    // 检查 TIFF 库是否已加载
-    if (typeof window.Tiff === 'undefined') {
-      throw new Error('TIFF 库未加载。请确保 tiff.min.js 已正确引入。');
-    }
-
-    const response = await fetch(props.url);
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const arrayBuffer = await response.arrayBuffer();
-
-    // 创建TIFF实例
-    const tiff = new window.Tiff({ buffer: arrayBuffer });
-    // 获取图像数据
-    const canvas = tiff.toCanvas();
-    // 转换为DataURL
-    imgDataUrl.value = canvas.toDataURL('image/png');
-    error.value = '';
-
-    // 清理 TIFF 实例
-    tiff.close();
-
-    emit('load', {
-      width: canvas.width,
-      height: canvas.height
-    });
-  } catch (err) {
-    console.error('加载TIFF文件失败:', err);
-    error.value = `加载TIFF文件失败: ${err.message}`;
-    emit('error', err);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// 图片加载成功回调
-const onImageLoad = () => {
-  console.log('TIFF图片渲染成功');
-};
-
-// 图片加载失败回调
-const onImageError = () => {
-  error.value = '图片渲染失败';
-};
-
-// 监听URL变化
-watch(
-  () => props.url,
-  (newUrl, oldUrl) => {
-    if (newUrl !== oldUrl) {
-      loadTiff();
-    }
-  }
-);
-
-// 挂载时加载
-onMounted(() => {
-  if (props.url) {
-    loadTiff();
-  }
-});
-
-// 组件销毁时清理
-onBeforeUnmount(() => {
-  cleanup();
-});
-
-// 暴露方法给父组件
-defineExpose({
-  cleanup,
-  reload: loadTiff,
-  reset
-});
-</script>
-
-<style lang="less" scoped>
-// 样式已统一到公共样式文件，这里只保留组件特定样式
-.img-container {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-
-.img-container .relative {
-  flex: 1;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.img-container img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  transition: transform 0.1s ease;
-}
-</style>
+<template>
+  <div class="preview-container" @wheel.prevent="handleWheel">
+    <div v-if="isLoading" class="loading-container">
+      <div>正在加载TIFF文件...</div>
+    </div>
+    <div v-else-if="error" class="preview-error-container">
+      <div>{{ error }}</div>
+    </div>
+    <div v-else class="img-container">
+      <!-- 工具栏 -->
+      <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>
+          <ATooltip mini position="bottom" content="重置">
+            <AButton
+              size="small"
+              type="outline"
+              @click="reset"
+            >
+              <RefreshCcw :size="16" />
+            </AButton>
+          </ATooltip>
+          <ATooltip
+            v-if="originalId"
+            mini
+            position="bottom"
+            content="查看原图"
+          >
+            <AButton
+              size="small"
+              type="outline"
+              @click="original"
+            >
+              <Maximize2 :size="16" />
+            </AButton>
+          </ATooltip>
+          <ATooltip mini position="bottom" content="缩小">
+            <AButton
+              size="small"
+              type="outline"
+              :disabled="scale <= minScale"
+              @click="zoom(-0.1)"
+            >
+              <ZoomOut :size="16" />
+            </AButton>
+          </ATooltip>
+          <ATooltip mini position="bottom" content="放大">
+            <AButton
+              size="small"
+              type="outline"
+              :disabled="scale >= maxScale"
+              @click="zoom(0.1)"
+            >
+              <ZoomIn :size="16" />
+            </AButton>
+          </ATooltip>
+          <ATooltip
+            v-if="isDownload"
+            mini
+            position="bottom"
+            content="下载"
+          >
+            <AButton
+              size="small"
+              type="outline"
+              @click="emit('download')"
+            >
+              <Download :size="16" />
+            </AButton>
+          </ATooltip>
+          <div class="toolbar-divider"></div>
+          <ATooltip mini position="bottom" content="向左旋转">
+            <AButton
+              size="small"
+              type="outline"
+              @click="rotateImage('left')"
+            >
+              <RotateCw :size="16" />
+            </AButton>
+          </ATooltip>
+          <ATooltip mini position="bottom" content="向右旋转">
+            <AButton
+              size="small"
+              type="outline"
+              @click="rotateImage('right')"
+            >
+              <RotateCcw :size="16" />
+            </AButton>
+          </ATooltip>
+        </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
+          ref="imgRef"
+          :src="imgDataUrl"
+          alt="TIFF Preview"
+          class="w-full"
+          :style="{
+            transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
+            cursor: isPanning ? 'grabbing' : 'grab'
+          }"
+          @load="onImageLoad"
+          @error="onImageError"
+          @contextmenu.prevent
+          @mousedown.prevent
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import { ZoomIn, ZoomOut, RefreshCcw, RotateCw, RotateCcw, Download, Maximize2 } from 'lucide-vue-next';
+import { Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
+
+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(['load', 'error', 'original', 'download']);
+
+const isLoading = ref(false);
+const error = ref('');
+const imgDataUrl = ref('');
+const imgRef = ref(null);
+
+// 缩放、旋转和拖拽相关状态
+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');
+};
+
+// 清理资源
+const cleanup = () => {
+  if (imgDataUrl.value) {
+    // 释放blob URL
+    if (imgDataUrl.value.startsWith('blob:')) {
+      URL.revokeObjectURL(imgDataUrl.value);
+    }
+    imgDataUrl.value = '';
+  }
+  error.value = '';
+  // 重置缩放和位置
+  reset();
+};
+
+// 加载TIFF文件
+const loadTiff = async () => {
+  if (!props.url) return;
+  cleanup();
+  isLoading.value = true;
+  error.value = '';
+  try {
+    // 检查 TIFF 库是否已加载，如果没有则自动加载
+    if (typeof window.Tiff === 'undefined') {
+      // 尝试使用 SDK 提供的加载函数
+      const loadTiffLibrary = window.__loadTiffLibrary;
+      if (loadTiffLibrary && typeof loadTiffLibrary === 'function') {
+        await loadTiffLibrary();
+      } else {
+        // 如果 SDK 加载函数不可用，直接动态导入
+        const tiffModule = await import('tiff.js');
+        
+        let Tiff = null;
+        
+        // 优先检查 window.Tiff（UMD 方式）
+        if (typeof window.Tiff !== 'undefined') {
+          Tiff = window.Tiff;
+        }
+        // 检查模块的 default 导出
+        else if (tiffModule.default && typeof tiffModule.default === 'function') {
+          Tiff = tiffModule.default;
+          window.Tiff = Tiff;
+        }
+        // 检查模块的直接导出
+        else if (typeof tiffModule === 'function') {
+          Tiff = tiffModule;
+          window.Tiff = Tiff;
+        }
+        // 等待 UMD 挂载
+        else {
+          let retries = 0;
+          while (typeof window.Tiff === 'undefined' && retries < 50) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            retries++;
+          }
+          Tiff = window.Tiff;
+        }
+        
+        if (!Tiff || typeof Tiff !== 'function') {
+          throw new Error(`TIFF 库加载失败：Tiff 不是一个函数。类型: ${typeof Tiff}`);
+        }
+        
+        // 确保 Tiff 已初始化
+        if (Tiff.initialize && typeof Tiff.initialize === 'function') {
+          // 如果 Module 为 null 或 undefined，需要初始化
+          if (Tiff.Module === null || Tiff.Module === undefined) {
+            Tiff.initialize({});
+            
+            // 等待 Module 初始化完成（从 null/undefined 变为对象）
+            let retries = 0;
+            while ((Tiff.Module === null || Tiff.Module === undefined) && retries < 100) {
+              await new Promise(resolve => setTimeout(resolve, 50));
+              retries++;
+            }
+            
+            if (Tiff.Module === null || Tiff.Module === undefined) {
+              throw new Error('TIFF 库初始化失败：Tiff.Module 未定义');
+            }
+          }
+        }
+      }
+    }
+
+    const response = await fetch(props.url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+
+    // 创建TIFF实例
+    // tiff.js 的 Tiff 是一个构造函数，需要使用 new 关键字
+    const Tiff = window.Tiff;
+    if (!Tiff || typeof Tiff !== 'function') {
+      console.error('window.Tiff:', window.Tiff);
+      console.error('typeof window.Tiff:', typeof window.Tiff);
+      throw new Error(`TIFF 库未正确加载：Tiff 不是一个函数。实际类型: ${typeof Tiff}`);
+    }
+    
+    // 确保 Tiff 已初始化（构造函数内部也会检查，但提前初始化更安全）
+    if (Tiff.initialize && typeof Tiff.initialize === 'function') {
+      // 如果 Module 为 null 或 undefined，需要初始化
+      if (Tiff.Module === null || Tiff.Module === undefined) {
+        Tiff.initialize({});
+        
+        // 等待 Module 初始化完成（从 null/undefined 变为对象）
+        let retries = 0;
+        while ((Tiff.Module === null || Tiff.Module === undefined) && retries < 100) {
+          await new Promise(resolve => setTimeout(resolve, 50));
+          retries++;
+        }
+        
+        if (Tiff.Module === null || Tiff.Module === undefined) {
+          throw new Error('TIFF 库初始化失败：Tiff.Module 未定义');
+        }
+      }
+    }
+    
+    // 使用 new 关键字创建 Tiff 实例
+    const tiff = new Tiff({ buffer: arrayBuffer });
+    // 获取图像数据
+    const canvas = tiff.toCanvas();
+    // 转换为DataURL
+    imgDataUrl.value = canvas.toDataURL('image/png');
+    error.value = '';
+
+    // 清理 TIFF 实例
+    tiff.close();
+
+    emit('load', {
+      width: canvas.width,
+      height: canvas.height
+    });
+  } catch (err) {
+    console.error('加载TIFF文件失败:', err);
+    error.value = `加载TIFF文件失败: ${err.message}`;
+    emit('error', err);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 图片加载成功回调
+const onImageLoad = () => {
+  console.log('TIFF图片渲染成功');
+};
+
+// 图片加载失败回调
+const onImageError = () => {
+  error.value = '图片渲染失败';
+};
+
+// 监听URL变化
+watch(
+  () => props.url,
+  (newUrl, oldUrl) => {
+    if (newUrl !== oldUrl) {
+      loadTiff();
+    }
+  }
+);
+
+// 挂载时加载
+onMounted(() => {
+  if (props.url) {
+    loadTiff();
+  }
+});
+
+// 组件销毁时清理
+onBeforeUnmount(() => {
+  cleanup();
+});
+
+// 暴露方法给父组件
+defineExpose({
+  cleanup,
+  reload: loadTiff,
+  reset
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+.img-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.img-container .relative {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.img-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: transform 0.1s ease;
+}
+</style>