@koi-br/ocr-web-sdk 1.0.28 → 1.0.29

package/dist/{tiff.min-DFX5shSB.mjs → tiff.min-D0JMbw7k.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-BUW0_Hv2.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-QOLKOKLO.mjs";
 function _mergeNamespaces(U, W) {
   for (var Z = 0; Z < W.length; Z++) {
     const s0 = W[Z];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/preview/ImagePreview.vue

@@ -426,12 +426,18 @@ const imageSize = computed({
 });
 
 // 计算图片放大后的实际尺寸（考虑旋转）
+// 在自适应宽度模式下，使用第一页的尺寸；否则使用当前页的尺寸
 const scaledImageSize = computed(() => {
-  if (imageSize.value.width === 0 || imageSize.value.height === 0) {
+  // 如果启用自适应宽度，使用第一页的尺寸作为基准
+  const baseSize = props.autoFitWidth 
+    ? (imageSizes.get(1) || { width: 0, height: 0 })
+    : imageSize.value;
+    
+  if (baseSize.width === 0 || baseSize.height === 0) {
     return { width: 0, height: 0 };
   }
 
-  const { width, height } = imageSize.value;
+  const { width, height } = baseSize;
   const scaledWidth = width * scale.value;
   const scaledHeight = height * scale.value;
 
@@ -825,11 +831,13 @@ const original = () => {
 
 // 计算自适应宽度的缩放比例
 const calculateAutoFitScale = () => {
-  if (
-    !props.autoFitWidth ||
-    !containerRef.value ||
-    imageSize.value.width === 0
-  ) {
+  if (!props.autoFitWidth || !containerRef.value) {
+    return 1;
+  }
+
+  // 使用第一页的图片尺寸作为基准（所有页面使用相同的缩放比例）
+  const firstPageSize = imageSizes.get(1);
+  if (!firstPageSize || firstPageSize.width === 0) {
     return 1;
   }
 
@@ -846,7 +854,7 @@ const calculateAutoFitScale = () => {
   const normalizedRotation = ((rotation.value % 360) + 360) % 360;
   const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
 
-  const imageWidth = isRotated ? imageSize.value.height : imageSize.value.width;
+  const imageWidth = isRotated ? firstPageSize.height : firstPageSize.width;
 
   if (imageWidth <= 0) {
     return 1;
@@ -884,10 +892,18 @@ const onImageLoad = (event: Event, pageNum: number) => {
             scale.value = autoScale;
             initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
           }
-        }, 50);
+        }, 100); // 增加延迟，确保所有图片都已加载
       });
     });
   }
+  
+  // 如果第一页已经加载完成，且当前页不是第一页，也应用自适应宽度
+  if (pageNum > 1 && props.autoFitWidth && initialAutoFitScale.value !== null) {
+    // 确保后续页面也使用相同的缩放比例
+    if (Math.abs(scale.value - initialAutoFitScale.value) > 0.01) {
+      scale.value = initialAutoFitScale.value;
+    }
+  }
 
   emit("load", {
     width: img.naturalWidth,
@@ -959,7 +975,7 @@ const calculateFontSize = (
 };
 
 /**
- * 渲染文本图层（使用 blocksData 数据）
+ * 渲染文本图层（使用 blocksData 数据，支持增量渲染）
  */
 const renderTextLayer = (pageNum?: number) => {
   const targetPage = pageNum || currentPage.value;
@@ -970,24 +986,38 @@ const renderTextLayer = (pageNum?: number) => {
     return;
   }
 
+  // 如果图片还没加载完成，等待加载完成后再渲染
+  if (!image.complete || image.naturalWidth === 0) {
+    return;
+  }
+
   const pageBlocksData = getPageBlocksData(targetPage);
   console.log("renderTextLayer", targetPage, pageBlocksData);
 
-  // 如果没有提供分块数据，跳过渲染
+  // 设置文本图层的尺寸与图片尺寸一致
+  textLayer.style.width = `${image.naturalWidth}px`;
+  textLayer.style.height = `${image.naturalHeight}px`;
+
+  // 如果没有提供分块数据，清空文本图层
   if (!pageBlocksData || pageBlocksData.length === 0) {
     textLayer.innerHTML = "";
     return;
   }
 
   try {
-    // 设置文本图层的尺寸与图片尺寸一致
-    textLayer.style.width = `${image.naturalWidth}px`;
-    textLayer.style.height = `${image.naturalHeight}px`;
+    // 增量渲染：获取现有的文本块
+    const existingBlocks = new Map<string, HTMLElement>();
+    textLayer.querySelectorAll(".text-block").forEach((el) => {
+      const bboxStr = (el as HTMLElement).dataset.bbox;
+      if (bboxStr) {
+        existingBlocks.set(bboxStr, el as HTMLElement);
+      }
+    });
 
-    // 清空文本图层
-    textLayer.innerHTML = "";
+    // 创建新的文本块 Map，用于跟踪需要保留的块
+    const newBlocksMap = new Map<string, boolean>();
 
-    // 使用指定页码的 blocksData 创建可交互的块
+    // 使用指定页码的 blocksData 创建或更新可交互的块
     pageBlocksData.forEach((block, index) => {
       const { content, bbox } = block;
 
@@ -1078,7 +1108,76 @@ const renderTextLayer = (pageNum?: number) => {
         blockDiv.style.backgroundColor = "transparent";
       }
 
-      textLayer.appendChild(blockDiv);
+      // 检查是否已存在相同的文本块（通过 bbox 匹配）
+      const bboxKey = JSON.stringify(bbox);
+      const existingBlock = existingBlocks.get(bboxKey);
+      
+      if (existingBlock) {
+        // 如果已存在，更新内容（增量更新，避免闪烁）
+        existingBlock.textContent = content;
+        existingBlock.dataset.text = content;
+        // 更新批注状态
+        const existingAnnotation = getAnnotationForBlock(bbox);
+        if (existingAnnotation) {
+          if (!existingBlock.classList.contains("has-annotation")) {
+            existingBlock.classList.add("has-annotation");
+            existingBlock.title = `已有批注: ${existingAnnotation.content}`;
+            existingBlock.style.backgroundColor = "rgba(255, 243, 205, 0.5)";
+            existingBlock.style.border = "1px solid rgba(255, 193, 7, 0.7)";
+            existingBlock.style.borderRadius = "3px";
+            existingBlock.style.padding = "1px 3px";
+            existingBlock.style.boxShadow = "0 1px 2px rgba(255, 193, 7, 0.25)";
+            
+            // 添加批注标记（如果还没有）
+            if (!existingBlock.querySelector(".annotation-marker")) {
+              const annotationMarker = document.createElement("span");
+              annotationMarker.className = "annotation-marker";
+              annotationMarker.textContent = "📝";
+              annotationMarker.style.position = "absolute";
+              annotationMarker.style.top = "-6px";
+              annotationMarker.style.right = "-6px";
+              annotationMarker.style.fontSize = "11px";
+              annotationMarker.style.backgroundColor = "rgba(255, 193, 7, 0.95)";
+              annotationMarker.style.borderRadius = "50%";
+              annotationMarker.style.width = "16px";
+              annotationMarker.style.height = "16px";
+              annotationMarker.style.display = "flex";
+              annotationMarker.style.alignItems = "center";
+              annotationMarker.style.justifyContent = "center";
+              annotationMarker.style.zIndex = "30";
+              annotationMarker.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.25)";
+              annotationMarker.style.lineHeight = "1";
+              existingBlock.appendChild(annotationMarker);
+            }
+          }
+        } else {
+          // 移除批注标记
+          if (existingBlock.classList.contains("has-annotation")) {
+            existingBlock.classList.remove("has-annotation");
+            existingBlock.title = "";
+            existingBlock.style.backgroundColor = "transparent";
+            existingBlock.style.border = "none";
+            existingBlock.style.padding = "0";
+            existingBlock.style.boxShadow = "none";
+            const marker = existingBlock.querySelector(".annotation-marker");
+            if (marker) {
+              marker.remove();
+            }
+          }
+        }
+        newBlocksMap.set(bboxKey, true);
+      } else {
+        // 如果不存在，创建新的文本块
+        textLayer.appendChild(blockDiv);
+        newBlocksMap.set(bboxKey, true);
+      }
+    });
+
+    // 删除不再存在的文本块（增量删除）
+    existingBlocks.forEach((block, bboxKey) => {
+      if (!newBlocksMap.has(bboxKey)) {
+        block.remove();
+      }
     });
   } catch (error) {
     console.error("❌ 文本图层渲染失败:", error);
@@ -1777,65 +1876,58 @@ const jumpToPosition = (
 };
 
 /**
- * 监听 blocksData 变化，重新渲染文本图层
+ * 监听 blocksData 变化，增量渲染所有页面的文本图层（避免闪烁）
  */
 watch(
   () => props.blocksData,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      // 渲染所有页面的文本图层
+      for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+        renderTextLayer(pageNum);
+      }
     });
   },
-  { deep: true, immediate: false }
+  { deep: true, immediate: true }
 );
 
 /**
- * 监听 annotations 变化，重新渲染文本图层以显示批注标记
+ * 监听 annotations 变化，增量更新所有页面的文本图层以显示批注标记
  */
 watch(
   () => props.annotations,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      // 更新所有页面的文本图层
+      for (let pageNum = 1; pageNum <= totalPages.value; pageNum++) {
+        renderTextLayer(pageNum);
+      }
     });
   },
   { deep: true }
 );
 
 /**
- * 监听当前页码变化，重新渲染文本图层
+ * 监听当前页码变化，确保当前页的文本图层已渲染
  */
 watch(
   () => currentPage.value,
   () => {
     nextTick(() => {
-      renderTextLayer();
+      renderTextLayer(currentPage.value);
     });
   }
 );
 
 /**
- * 监听当前页码的blocksData变化，重新渲染文本图层
- */
-watch(
-  () => currentPageBlocksData.value,
-  () => {
-    nextTick(() => {
-      renderTextLayer();
-    });
-  },
-  { deep: true }
-);
-
-/**
- * 监听图片尺寸变化，重新渲染文本图层
+ * 监听图片尺寸变化，重新渲染当前页的文本图层
  */
 watch(
   () => imageSize.value,
   () => {
     if (imageSize.value.width > 0 && imageSize.value.height > 0) {
       nextTick(() => {
-        renderTextLayer();
+        renderTextLayer(currentPage.value);
       });
     }
   },
@@ -1858,18 +1950,23 @@ watch(
  * 组件挂载时的初始化
  */
 onMounted(() => {
-  // 如果图片已经加载完成，立即渲染文本图层和自适应宽度
-  if (imageRef.value && imageRef.value.complete) {
-    nextTick(() => {
-      // 如果启用自适应宽度，计算并设置初始缩放比例
-      if (props.autoFitWidth && imageSize.value.width > 0) {
-        const autoScale = calculateAutoFitScale();
-        if (autoScale !== 1) {
-          scale.value = autoScale;
-        }
-      }
-      renderTextLayer();
-    });
+  // 如果第一页图片已经加载完成，立即计算自适应宽度
+  const firstPageImage = imageRefs.get(1);
+  if (firstPageImage && firstPageImage.complete && props.autoFitWidth) {
+    const firstPageSize = imageSizes.get(1);
+    if (firstPageSize && firstPageSize.width > 0) {
+      nextTick(() => {
+        nextTick(() => {
+          setTimeout(() => {
+            const autoScale = calculateAutoFitScale();
+            if (autoScale !== 1 && autoScale > 0) {
+              scale.value = autoScale;
+              initialAutoFitScale.value = autoScale;
+            }
+          }, 100);
+        });
+      });
+    }
   }
 });