Ver Fonte

✨ feat(WordPreview): 实现图片实际尺寸渲染功能

- 添加图片尺寸缓存机制,避免重复计算
- 实现PNG格式图片实际尺寸检测
- 实现JPEG格式图片实际尺寸检测
- 优化图片模块配置,使用实际尺寸替代固定尺寸
- 添加错误处理机制,无法检测尺寸时使用默认值
yourname há 4 meses atrás
pai
commit
702a3563d2
1 ficheiros alterados com 66 adições e 2 exclusões
  1. 66 2
      src/client/admin-shadcn/pages/WordPreview.tsx

+ 66 - 2
src/client/admin-shadcn/pages/WordPreview.tsx

@@ -275,7 +275,9 @@ export default function WordPreview() {
         }
       }
       
-      // 配置图片模块 - 使用同步数据
+      // 配置图片模块 - 使用实际图片尺寸
+      const imageSizeCache = new Map<string, [number, number]>();
+      
       const imageOpts = {
         centered: false,
         getImage: (tagValue: string): ArrayBuffer | null => {
@@ -284,7 +286,69 @@ export default function WordPreview() {
           }
           return null;
         },
-        getSize: () => [200, 150] // 固定尺寸
+        getSize: (img: ArrayBuffer, tagValue: string, tagName: string) => {
+          console.log('tagName', tagName)
+          console.log('tagValue', tagValue)
+          // 从图片数据中获取实际尺寸
+          try {
+            // 为每个图片创建唯一的缓存键
+            const cacheKey = `${tagValue}_${img.byteLength}`;
+            
+            // 如果已经缓存了尺寸,直接返回
+            if (imageSizeCache.has(cacheKey)) {
+              return imageSizeCache.get(cacheKey)!;
+            }
+            
+            // 简化的图片尺寸检测(基于图片数据特征)
+            // 这里我们使用一个合理的方法来从图片数据推断尺寸
+            const view = new DataView(img);
+            
+            // PNG格式检测
+            if (view.getUint32(0) === 0x89504E47 && view.getUint32(4) === 0x0D0A1A0A) {
+              // PNG IHDR chunk: width at offset 16, height at offset 20
+              const width = view.getUint32(16);
+              const height = view.getUint32(20);
+              const size: [number, number] = [width, height];
+              console.log('size', size)
+              imageSizeCache.set(cacheKey, size);
+              return size;
+            }
+            
+            // JPEG格式检测
+            if (view.getUint16(0) === 0xFFD8) {
+              // 简化的JPEG尺寸检测
+              let offset = 2;
+              while (offset < img.byteLength - 10) {
+                if (view.getUint8(offset) === 0xFF) {
+                  const marker = view.getUint8(offset + 1);
+                  if (marker >= 0xC0 && marker <= 0xC3) {
+                    // SOF marker found
+                    const height = view.getUint16(offset + 5);
+                    const width = view.getUint16(offset + 7);
+                    const size: [number, number] = [width, height];
+                    console.log('size', size)
+                    imageSizeCache.set(cacheKey, size);
+                    return size;
+                  }
+                  const length = view.getUint16(offset + 2);
+                  offset += length + 2;
+                  continue;
+                }
+                offset++;
+              }
+            }
+            
+            // 如果无法检测尺寸,使用默认尺寸
+            const defaultSize: [number, number] = [200, 150];
+            imageSizeCache.set(cacheKey, defaultSize);
+            console.log('defaultSize', defaultSize)
+            return defaultSize;
+            
+          } catch (error) {
+            console.warn('Failed to get image size, using default:', error);
+            return [200, 150];
+          }
+        }
       };
       
       const imageModule = new ImageModule(imageOpts);