Upload useExport.ts

frontend/src/hooks/useExport.ts

@@ -12,6 +12,7 @@ import { type AST, toAST } from '@/utils/htmlParser'
 import { type SvgPoints, toPoints } from '@/utils/svgPathParser'
 import { encrypt } from '@/utils/crypto'
 import { svg2Base64 } from '@/utils/svg2Base64'
+import { renderElementToBase64, isCanvasRenderSupported, getElementDimensions } from '@/utils/canvasRenderer'
 import message from '@/utils/message'
 
 interface ExportImageConfig {
@@ -996,8 +997,7 @@ export default () => {
 
         else if (el.type === 'shape') {
           if (el.special) {
-            // 调试：记录元素信息
-            console.log(`Processing special shape ${el.id}:`, {
+            console.log(`Processing special shape ${el.id} with Canvas rendering:`, {
               type: el.type,
               special: el.special,
               width: el.width,
@@ -1006,71 +1006,164 @@ export default () => {
               top: el.top
             });
             
-            // 尝试多种选择器策略
-            let svgRef = document.querySelector(`.thumbnail-list .base-element-${el.id} svg`) as HTMLElement;
+            // 检查Canvas渲染支持
+            if (!isCanvasRenderSupported()) {
+              console.warn('Canvas rendering not supported, falling back to path-based export');
+              // 降级到普通形状处理的代码保持不变
+              const scale = {
+                x: el.width / el.viewBox[0],
+                y: el.height / el.viewBox[1],
+              };
+              const points = formatPoints(toPoints(el.path), scale);
+              
+              let fillColor = formatColor(el.fill);
+              if (el.gradient) {
+                const colors = el.gradient.colors;
+                const color1 = colors[0].color;
+                const color2 = colors[colors.length - 1].color;
+                const color = tinycolor.mix(color1, color2).toHexString();
+                fillColor = formatColor(color);
+              }
+              if (el.pattern) fillColor = formatColor('#00000000');
+              const opacity = el.opacity === undefined ? 1 : el.opacity;
+              
+              const fallbackOptions: pptxgen.ShapeProps = {
+                x: el.left / ratioPx2Inch.value,
+                y: el.top / ratioPx2Inch.value,
+                w: el.width / ratioPx2Inch.value,
+                h: el.height / ratioPx2Inch.value,
+                fill: { color: fillColor.color, transparency: (1 - fillColor.alpha * opacity) * 100 },
+                points,
+              };
+              
+              if (el.flipH) fallbackOptions.flipH = el.flipH;
+              if (el.flipV) fallbackOptions.flipV = el.flipV;
+              if (el.shadow) fallbackOptions.shadow = getShadowOption(el.shadow);
+              if (el.outline?.width) fallbackOptions.line = getOutlineOption(el.outline);
+              if (el.rotate) fallbackOptions.rotate = el.rotate;
+              if (el.link) {
+                const linkOption = getLinkOption(el.link);
+                if (linkOption) fallbackOptions.hyperlink = linkOption;
+              }
+              
+              pptxSlide.addShape('custGeom' as pptxgen.ShapeType, fallbackOptions);
+              continue;
+            }
+            
+            // 尝试多种选择器策略查找元素
+            let targetElement: HTMLElement | null = null;
+            
+            // 优先查找包含SVG的容器元素
+            const containerSelectors = [
+              `.thumbnail-list .base-element-${el.id}`,
+              `[data-element-id="${el.id}"]`,
+              `#element-${el.id}`,
+              `[class*="${el.id}"]`
+            ];
             
-            if (!svgRef) {
-              // 尝试其他可能的选择器
-              svgRef = document.querySelector(`[data-element-id="${el.id}"] svg`) as HTMLElement;
+            for (const selector of containerSelectors) {
+              const container = document.querySelector(selector) as HTMLElement;
+              if (container) {
+                // 检查容器是否包含SVG
+                const svgInContainer = container.querySelector('svg');
+                if (svgInContainer) {
+                  targetElement = container;
+                  console.log(`Found container with SVG for ${el.id} using selector: ${selector}`);
+                  break;
+                }
+                // 如果容器本身就是我们要的元素
+                if (container.tagName.toLowerCase() === 'svg' || container.children.length > 0) {
+                  targetElement = container;
+                  console.log(`Found target element for ${el.id} using selector: ${selector}`);
+                  break;
+                }
+              }
             }
             
-            if (!svgRef) {
-              svgRef = document.querySelector(`#element-${el.id} svg`) as HTMLElement;
+            // 如果没找到容器，直接查找SVG元素
+            if (!targetElement) {
+              const svgSelectors = [
+                `.thumbnail-list .base-element-${el.id} svg`,
+                `[data-element-id="${el.id}"] svg`,
+                `#element-${el.id} svg`
+              ];
+              
+              for (const selector of svgSelectors) {
+                const svgElement = document.querySelector(selector) as HTMLElement;
+                if (svgElement) {
+                  targetElement = svgElement;
+                  console.log(`Found SVG element for ${el.id} using selector: ${selector}`);
+                  break;
+                }
+              }
             }
             
-            if (!svgRef) {
-              // 尝试查找所有SVG元素并匹配
+            // 最后尝试通过父元素匹配查找
+            if (!targetElement) {
               const allSvgs = document.querySelectorAll('svg');
-              console.log(`Found ${allSvgs.length} SVG elements in document`);
+              console.log(`Searching through ${allSvgs.length} SVG elements for ${el.id}`);
               
-              for (let i = 0; i < allSvgs.length; i++) {
-                const svg = allSvgs[i] as HTMLElement;
+              for (const svg of allSvgs) {
                 const parent = svg.closest(`[class*="${el.id}"]`);
                 if (parent) {
-                  svgRef = svg;
+                  targetElement = svg as HTMLElement;
                   console.log(`Found SVG for ${el.id} using parent matching`);
                   break;
                 }
               }
             }
             
-            // 改进的尺寸检查逻辑
-            if (!svgRef) {
-              console.warn(`SVG element not found for shape ${el.id} after trying multiple selectors`);
-              console.log('Available elements with class containing element ID:', 
-                document.querySelectorAll(`[class*="${el.id}"]`));
+            if (!targetElement) {
+              console.warn(`No target element found for shape ${el.id}, falling back to path-based export`);
+              // 降级处理代码...
+              const scale = {
+                x: el.width / el.viewBox[0],
+                y: el.height / el.viewBox[1],
+              };
+              const points = formatPoints(toPoints(el.path), scale);
+              
+              let fillColor = formatColor(el.fill);
+              if (el.gradient) {
+                const colors = el.gradient.colors;
+                const color1 = colors[0].color;
+                const color2 = colors[colors.length - 1].color;
+                const color = tinycolor.mix(color1, color2).toHexString();
+                fillColor = formatColor(color);
+              }
+              if (el.pattern) fillColor = formatColor('#00000000');
+              const opacity = el.opacity === undefined ? 1 : el.opacity;
+              
+              const fallbackOptions: pptxgen.ShapeProps = {
+                x: el.left / ratioPx2Inch.value,
+                y: el.top / ratioPx2Inch.value,
+                w: el.width / ratioPx2Inch.value,
+                h: el.height / ratioPx2Inch.value,
+                fill: { color: fillColor.color, transparency: (1 - fillColor.alpha * opacity) * 100 },
+                points,
+              };
+              
+              if (el.flipH) fallbackOptions.flipH = el.flipH;
+              if (el.flipV) fallbackOptions.flipV = el.flipV;
+              if (el.shadow) fallbackOptions.shadow = getShadowOption(el.shadow);
+              if (el.outline?.width) fallbackOptions.line = getOutlineOption(el.outline);
+              if (el.rotate) fallbackOptions.rotate = el.rotate;
+              if (el.link) {
+                const linkOption = getLinkOption(el.link);
+                if (linkOption) fallbackOptions.hyperlink = linkOption;
+              }
+              
+              pptxSlide.addShape('custGeom' as pptxgen.ShapeType, fallbackOptions);
               continue;
             }
             
-            console.log(`Found SVG element for ${el.id}:`, {
-              tagName: svgRef.tagName,
-              className: svgRef.className,
-              innerHTML: svgRef.innerHTML.substring(0, 200) + '...'
-            });
-            
-            // 获取多种尺寸信息进行判断
-            const clientWidth = svgRef.clientWidth;
-            const clientHeight = svgRef.clientHeight;
-            const boundingRect = svgRef.getBoundingClientRect();
-            const computedStyle = window.getComputedStyle(svgRef);
-            
-            // 更智能的尺寸判断
-            const hasValidSize = (
-              (clientWidth > 0 && clientHeight > 0) ||
-              (boundingRect.width > 0 && boundingRect.height > 0) ||
-              (parseFloat(computedStyle.width) > 0 && parseFloat(computedStyle.height) > 0)
-            );
+            // 检查元素尺寸
+            const dimensions = getElementDimensions(targetElement);
+            console.log(`Target element dimensions for ${el.id}:`, dimensions);
             
-            if (!hasValidSize) {
-              console.warn(`Invalid SVG dimensions for shape ${el.id}:`, {
-                clientWidth,
-                clientHeight,
-                boundingRect: { width: boundingRect.width, height: boundingRect.height },
-                computedStyle: { width: computedStyle.width, height: computedStyle.height }
-              });
-              
-              // 降级到普通形状处理
-              console.info(`Falling back to path-based export for shape ${el.id}`);
+            if (dimensions.width <= 0 || dimensions.height <= 0) {
+              console.warn(`Invalid element dimensions for shape ${el.id}:`, dimensions);
+              console.log('Falling back to path-based export');
+              // 降级处理代码...
               const scale = {
                 x: el.width / el.viewBox[0],
                 y: el.height / el.viewBox[1],
@@ -1111,35 +1204,96 @@ export default () => {
               continue;
             }
             
-            // SVG序列化with错误处理
-            let base64SVG;
+            // 使用Canvas渲染
+            let base64Image;
             try {
-              console.log(`Starting SVG serialization for ${el.id}`);
-              console.log('SVG content before serialization:', svgRef.outerHTML.substring(0, 500) + '...');
+              console.log(`Starting Canvas rendering for ${el.id}`);
+              
+              // Canvas渲染选项
+              const renderOptions = {
+                scale: 2, // 高分辨率渲染
+                backgroundColor: null, // 透明背景
+                useCORS: true,
+                timeout: 10000, // 10秒超时
+                format: 'png' as const,
+                quality: 0.95
+              };
               
-              base64SVG = svg2Base64(svgRef);
+              base64Image = await renderElementToBase64(targetElement, renderOptions);
               
-              console.log(`SVG serialization result for ${el.id}:`, {
-                success: !!base64SVG,
-                length: base64SVG ? base64SVG.length : 0,
-                preview: base64SVG ? base64SVG.substring(0, 100) + '...' : 'null'
+              console.log(`Canvas rendering result for ${el.id}:`, {
+                success: !!base64Image,
+                length: base64Image ? base64Image.length : 0,
+                preview: base64Image ? base64Image.substring(0, 100) + '...' : 'null'
               });
               
-              if (!base64SVG || base64SVG === 'data:image/svg+xml;base64,') {
-                throw new Error('SVG serialization returned empty result');
+              if (!base64Image || base64Image.length < 100) {
+                throw new Error('Canvas rendering returned empty or invalid result');
               }
             } catch (error) {
-              console.error(`SVG serialization failed for shape ${el.id}:`, error);
-              console.log('SVG element that failed:', svgRef);
-              console.log('SVG outerHTML:', svgRef.outerHTML);
+              console.error(`Canvas rendering failed for shape ${el.id}:`, error);
               
-              // 尝试降级处理
-              console.log(`Attempting fallback processing for shape ${el.id}`);
-              continue;
+              // 尝试SVG序列化作为备选方案
+              console.log(`Attempting SVG serialization fallback for ${el.id}`);
+              try {
+                const svgElement = targetElement.tagName.toLowerCase() === 'svg' 
+                  ? targetElement 
+                  : targetElement.querySelector('svg');
+                  
+                if (svgElement) {
+                  base64Image = svg2Base64(svgElement);
+                  console.log(`SVG fallback successful for ${el.id}`);
+                } else {
+                  throw new Error('No SVG element found for fallback');
+                }
+              } catch (svgError) {
+                console.error(`SVG fallback also failed for ${el.id}:`, svgError);
+                // 最终降级到路径导出
+                console.log(`Final fallback to path-based export for ${el.id}`);
+                const scale = {
+                  x: el.width / el.viewBox[0],
+                  y: el.height / el.viewBox[1],
+                };
+                const points = formatPoints(toPoints(el.path), scale);
+                
+                let fillColor = formatColor(el.fill);
+                if (el.gradient) {
+                  const colors = el.gradient.colors;
+                  const color1 = colors[0].color;
+                  const color2 = colors[colors.length - 1].color;
+                  const color = tinycolor.mix(color1, color2).toHexString();
+                  fillColor = formatColor(color);
+                }
+                if (el.pattern) fillColor = formatColor('#00000000');
+                const opacity = el.opacity === undefined ? 1 : el.opacity;
+                
+                const fallbackOptions: pptxgen.ShapeProps = {
+                  x: el.left / ratioPx2Inch.value,
+                  y: el.top / ratioPx2Inch.value,
+                  w: el.width / ratioPx2Inch.value,
+                  h: el.height / ratioPx2Inch.value,
+                  fill: { color: fillColor.color, transparency: (1 - fillColor.alpha * opacity) * 100 },
+                  points,
+                };
+                
+                if (el.flipH) fallbackOptions.flipH = el.flipH;
+                if (el.flipV) fallbackOptions.flipV = el.flipV;
+                if (el.shadow) fallbackOptions.shadow = getShadowOption(el.shadow);
+                if (el.outline?.width) fallbackOptions.line = getOutlineOption(el.outline);
+                if (el.rotate) fallbackOptions.rotate = el.rotate;
+                if (el.link) {
+                  const linkOption = getLinkOption(el.link);
+                  if (linkOption) fallbackOptions.hyperlink = linkOption;
+                }
+                
+                pptxSlide.addShape('custGeom' as pptxgen.ShapeType, fallbackOptions);
+                continue;
+              }
             }
 
+            // 添加渲染后的图像到幻灯片
             const options: pptxgen.ImageProps = {
-              data: base64SVG,
+              data: base64Image,
               x: el.left / ratioPx2Inch.value,
               y: el.top / ratioPx2Inch.value,
               w: el.width / ratioPx2Inch.value,
@@ -1153,6 +1307,7 @@ export default () => {
               if (linkOption) options.hyperlink = linkOption
             }
 
+            console.log(`Successfully added Canvas-rendered image for shape ${el.id}`);
             pptxSlide.addImage(options)
           }
           else {