@koi-br/ocr-web-sdk 1.0.39 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index-CSqGQ8S7.mjs → index-BkDBuqYg.mjs} +2558 -2523
- package/dist/{index-B1uZCXKP.js → index-CljhWsvW.js} +49 -49
- package/dist/index.cjs.js +2 -2
- package/dist/index.esm.js +2 -2
- package/dist/{tiff.min-D3W7y7O-.js → tiff.min-CaQgo9oU.js} +1 -1
- package/dist/{tiff.min-CqXFy9Hv.mjs → tiff.min-Cf15IJWV.mjs} +1 -1
- package/package.json +1 -1
- package/preview/ImagePreview.vue +65 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-
|
|
1
|
+
import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-BkDBuqYg.mjs";
|
|
2
2
|
function _mergeNamespaces(U, W) {
|
|
3
3
|
for (var Z = 0; Z < W.length; Z++) {
|
|
4
4
|
const s0 = W[Z];
|
package/package.json
CHANGED
package/preview/ImagePreview.vue
CHANGED
|
@@ -120,6 +120,13 @@
|
|
|
120
120
|
<div v-if="isCalculatingAutoFit && autoFitWidth" class="auto-fit-loading">
|
|
121
121
|
<div class="loading-spinner"></div>
|
|
122
122
|
<div class="loading-text">加载中...</div>
|
|
123
|
+
<!-- 调试信息(开发环境显示) -->
|
|
124
|
+
<div style="font-size: 12px; color: #999; margin-top: 8px; text-align: center;">
|
|
125
|
+
isImageReady: {{ isImageReady }},
|
|
126
|
+
isCalculatingAutoFit: {{ isCalculatingAutoFit }},
|
|
127
|
+
autoFitWidth: {{ autoFitWidth }},
|
|
128
|
+
scale: {{ scale }}
|
|
129
|
+
</div>
|
|
123
130
|
</div>
|
|
124
131
|
|
|
125
132
|
<div
|
|
@@ -407,13 +414,24 @@ const isImageReady = ref(false); // 标记图片是否已准备好显示(自
|
|
|
407
414
|
watch(
|
|
408
415
|
() => imageUrls.value,
|
|
409
416
|
(newUrls, oldUrls) => {
|
|
417
|
+
console.log('[ImagePreview] imageUrls changed:', {
|
|
418
|
+
newUrls: newUrls?.length,
|
|
419
|
+
oldUrls: oldUrls?.length,
|
|
420
|
+
autoFitWidth: props.autoFitWidth,
|
|
421
|
+
isImageReady: isImageReady.value,
|
|
422
|
+
isCalculatingAutoFit: isCalculatingAutoFit.value,
|
|
423
|
+
});
|
|
424
|
+
|
|
410
425
|
// 如果有新的图片URL,且启用自适应宽度,立即隐藏图片
|
|
411
426
|
if (newUrls && newUrls.length > 0 && props.autoFitWidth) {
|
|
427
|
+
console.log('[ImagePreview] 设置图片隐藏,等待自适应宽度计算');
|
|
412
428
|
isImageReady.value = false;
|
|
413
429
|
isCalculatingAutoFit.value = true;
|
|
414
430
|
} else if (!props.autoFitWidth) {
|
|
415
431
|
// 如果没有启用自适应宽度,立即显示
|
|
432
|
+
console.log('[ImagePreview] 未启用自适应宽度,立即显示图片');
|
|
416
433
|
isImageReady.value = true;
|
|
434
|
+
isCalculatingAutoFit.value = false;
|
|
417
435
|
}
|
|
418
436
|
},
|
|
419
437
|
{ immediate: true }
|
|
@@ -916,13 +934,25 @@ const original = () => {
|
|
|
916
934
|
|
|
917
935
|
// 计算自适应宽度的缩放比例
|
|
918
936
|
const calculateAutoFitScale = () => {
|
|
937
|
+
console.log('[ImagePreview] calculateAutoFitScale 开始:', {
|
|
938
|
+
autoFitWidth: props.autoFitWidth,
|
|
939
|
+
hasContainerRef: !!containerRef.value,
|
|
940
|
+
containerRect: containerRef.value?.getBoundingClientRect(),
|
|
941
|
+
firstPageSize: imageSizes.get(1),
|
|
942
|
+
rotation: rotation.value,
|
|
943
|
+
minScale: props.minScale,
|
|
944
|
+
maxScale: props.maxScale,
|
|
945
|
+
});
|
|
946
|
+
|
|
919
947
|
if (!props.autoFitWidth || !containerRef.value) {
|
|
948
|
+
console.log('[ImagePreview] calculateAutoFitScale 返回 1 (条件不满足)');
|
|
920
949
|
return 1;
|
|
921
950
|
}
|
|
922
951
|
|
|
923
952
|
// 使用第一页的图片尺寸作为基准(所有页面使用相同的缩放比例)
|
|
924
953
|
const firstPageSize = imageSizes.get(1);
|
|
925
954
|
if (!firstPageSize || firstPageSize.width === 0) {
|
|
955
|
+
console.log('[ImagePreview] calculateAutoFitScale 返回 1 (第一页尺寸无效)', firstPageSize);
|
|
926
956
|
return 1;
|
|
927
957
|
}
|
|
928
958
|
|
|
@@ -932,6 +962,7 @@ const calculateAutoFitScale = () => {
|
|
|
932
962
|
const containerWidth = containerRect.width - 4;
|
|
933
963
|
|
|
934
964
|
if (containerWidth <= 0) {
|
|
965
|
+
console.log('[ImagePreview] calculateAutoFitScale 返回 1 (容器宽度无效)', containerWidth);
|
|
935
966
|
return 1;
|
|
936
967
|
}
|
|
937
968
|
|
|
@@ -942,20 +973,38 @@ const calculateAutoFitScale = () => {
|
|
|
942
973
|
const imageWidth = isRotated ? firstPageSize.height : firstPageSize.width;
|
|
943
974
|
|
|
944
975
|
if (imageWidth <= 0) {
|
|
976
|
+
console.log('[ImagePreview] calculateAutoFitScale 返回 1 (图片宽度无效)', imageWidth);
|
|
945
977
|
return 1;
|
|
946
978
|
}
|
|
947
979
|
|
|
948
980
|
// 计算缩放比例,使图片宽度完全适应容器宽度
|
|
949
981
|
const calculatedScale = containerWidth / imageWidth;
|
|
982
|
+
const finalScale = Math.max(props.minScale, Math.min(props.maxScale, calculatedScale));
|
|
983
|
+
|
|
984
|
+
console.log('[ImagePreview] calculateAutoFitScale 计算结果:', {
|
|
985
|
+
containerWidth,
|
|
986
|
+
imageWidth,
|
|
987
|
+
calculatedScale,
|
|
988
|
+
finalScale,
|
|
989
|
+
});
|
|
950
990
|
|
|
951
991
|
// 确保缩放比例在允许的范围内
|
|
952
|
-
return
|
|
992
|
+
return finalScale;
|
|
953
993
|
};
|
|
954
994
|
|
|
955
995
|
// 图片加载完成处理
|
|
956
996
|
const onImageLoad = (event: Event, pageNum: number) => {
|
|
957
997
|
const img = event.target as HTMLImageElement;
|
|
958
998
|
|
|
999
|
+
console.log('[ImagePreview] 图片加载完成:', {
|
|
1000
|
+
pageNum,
|
|
1001
|
+
naturalWidth: img.naturalWidth,
|
|
1002
|
+
naturalHeight: img.naturalHeight,
|
|
1003
|
+
autoFitWidth: props.autoFitWidth,
|
|
1004
|
+
isImageReady: isImageReady.value,
|
|
1005
|
+
isCalculatingAutoFit: isCalculatingAutoFit.value,
|
|
1006
|
+
});
|
|
1007
|
+
|
|
959
1008
|
// 存储该页的图片尺寸
|
|
960
1009
|
imageSizes.set(pageNum, {
|
|
961
1010
|
width: img.naturalWidth,
|
|
@@ -964,6 +1013,7 @@ const onImageLoad = (event: Event, pageNum: number) => {
|
|
|
964
1013
|
|
|
965
1014
|
// 如果是第一页且启用自适应宽度,计算并设置初始缩放比例
|
|
966
1015
|
if (pageNum === 1 && props.autoFitWidth) {
|
|
1016
|
+
console.log('[ImagePreview] 第一页加载完成,开始计算自适应宽度');
|
|
967
1017
|
// 重置用户缩放标记
|
|
968
1018
|
isUserZooming.value = false;
|
|
969
1019
|
|
|
@@ -985,21 +1035,34 @@ const onImageLoad = (event: Event, pageNum: number) => {
|
|
|
985
1035
|
// 添加小延迟确保容器完全渲染
|
|
986
1036
|
setTimeout(() => {
|
|
987
1037
|
try {
|
|
1038
|
+
console.log('[ImagePreview] onImageLoad: 开始计算自适应宽度...');
|
|
988
1039
|
const autoScale = calculateAutoFitScale();
|
|
1040
|
+
console.log('[ImagePreview] onImageLoad: 自适应宽度计算结果:', {
|
|
1041
|
+
autoScale,
|
|
1042
|
+
containerRef: !!containerRef.value,
|
|
1043
|
+
containerWidth: containerRef.value?.getBoundingClientRect()?.width,
|
|
1044
|
+
firstPageSize: imageSizes.get(1),
|
|
1045
|
+
});
|
|
1046
|
+
|
|
989
1047
|
if (autoScale > 0) {
|
|
990
1048
|
scale.value = autoScale;
|
|
991
1049
|
initialAutoFitScale.value = autoScale; // 记录初始自适应缩放比例
|
|
1050
|
+
console.log('[ImagePreview] onImageLoad: 缩放比例已设置:', autoScale);
|
|
1051
|
+
} else {
|
|
1052
|
+
console.warn('[ImagePreview] onImageLoad: 计算出的缩放比例无效:', autoScale);
|
|
992
1053
|
}
|
|
993
1054
|
} catch (error) {
|
|
994
|
-
console.
|
|
1055
|
+
console.error('[ImagePreview] onImageLoad: 计算自适应宽度失败:', error);
|
|
995
1056
|
} finally {
|
|
996
1057
|
// 清除超时保护
|
|
997
1058
|
clearTimeout(timeoutId);
|
|
1059
|
+
console.log('[ImagePreview] onImageLoad: 更新状态: isCalculatingAutoFit = false, isImageReady = true');
|
|
998
1060
|
// 无论计算结果如何,都要更新状态,避免一直显示 loading
|
|
999
1061
|
isCalculatingAutoFit.value = false;
|
|
1000
1062
|
// 使用 requestAnimationFrame 确保在下一帧显示,避免闪烁
|
|
1001
1063
|
requestAnimationFrame(() => {
|
|
1002
1064
|
isImageReady.value = true;
|
|
1065
|
+
console.log('[ImagePreview] onImageLoad: 图片已准备好显示');
|
|
1003
1066
|
});
|
|
1004
1067
|
}
|
|
1005
1068
|
}, 100); // 增加延迟,确保所有图片都已加载
|