Upload canvasRenderer.ts

frontend/src/utils/canvasRenderer.ts

@@ -29,46 +29,103 @@ export async function renderElementToCanvas(
   element: HTMLElement,
   options: RenderOptions = {}
 ): Promise<HTMLCanvasElement> {
-  const {
-    scale = 1,
-    backgroundColor = null,
-    useCORS = true,
-    timeout = 5000
+  const { 
+    scale = 2, // 默认使用更高的缩放比例
+    backgroundColor = null, // 默认透明背景
+    useCORS = true, 
+    timeout = 15000 // 增加超时时间
   } = options;
-
-  return new Promise(async (resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      reject(new Error('Canvas rendering timeout'));
-    }, timeout);
-
-    try {
-      // 动态导入html2canvas
-      const html2canvas = await getHtml2Canvas();
-      
-      // 使用html2canvas进行渲染
-      html2canvas(element, {
-        scale,
-        backgroundColor,
-        useCORS,
-        allowTaint: !useCORS,
-        foreignObjectRendering: true,
-        logging: false,
-        width: element.offsetWidth,
-        height: element.offsetHeight,
-        windowWidth: element.offsetWidth,
-        windowHeight: element.offsetHeight
-      }).then((canvas) => {
-        clearTimeout(timeoutId);
-        resolve(canvas);
-      }).catch((error) => {
-        clearTimeout(timeoutId);
-        reject(new Error(`html2canvas rendering failed: ${error.message}`));
-      });
-    } catch (error) {
-      clearTimeout(timeoutId);
-      reject(error);
+  
+  try {
+    // 动态导入html2canvas以减少初始包大小
+    const html2canvas = (await import('html2canvas')).default;
+    
+    // 获取元素的实际尺寸
+    const rect = element.getBoundingClientRect();
+    const computedStyle = window.getComputedStyle(element);
+    
+    const renderWidth = Math.max(
+      rect.width,
+      element.offsetWidth,
+      parseFloat(computedStyle.width) || 0
+    );
+    const renderHeight = Math.max(
+      rect.height,
+      element.offsetHeight,
+      parseFloat(computedStyle.height) || 0
+    );
+    
+    console.log('Canvas rendering dimensions:', {
+      boundingRect: { width: rect.width, height: rect.height },
+      offset: { width: element.offsetWidth, height: element.offsetHeight },
+      computed: { width: computedStyle.width, height: computedStyle.height },
+      final: { width: renderWidth, height: renderHeight }
+    });
+    
+    const canvas = await html2canvas(element, {
+      scale,
+      backgroundColor,
+      useCORS,
+      allowTaint: false,
+      foreignObjectRendering: true,
+      logging: false,
+      width: renderWidth || 100,
+      height: renderHeight || 100,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
+      scrollX: 0,
+      scrollY: 0,
+      onclone: (clonedDoc, clonedElement) => {
+        // 在克隆的文档中应用样式修复
+        const targetElement = clonedElement || clonedDoc.querySelector(`[data-element-id="${element.getAttribute('data-element-id')}"]`);
+        if (targetElement) {
+          // 确保SVG元素正确渲染
+          const svgElements = targetElement.querySelectorAll('svg');
+          svgElements.forEach(svg => {
+            // 设置SVG尺寸
+            if (!svg.getAttribute('width') || !svg.getAttribute('height')) {
+              const svgRect = svg.getBoundingClientRect();
+              if (svgRect.width > 0 && svgRect.height > 0) {
+                svg.setAttribute('width', svgRect.width.toString());
+                svg.setAttribute('height', svgRect.height.toString());
+              } else {
+                svg.setAttribute('width', renderWidth.toString());
+                svg.setAttribute('height', renderHeight.toString());
+              }
+            }
+            
+            // 确保viewBox存在
+            if (!svg.getAttribute('viewBox')) {
+              const width = svg.getAttribute('width') || renderWidth;
+              const height = svg.getAttribute('height') || renderHeight;
+              svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+            }
+            
+            // 添加必要的命名空间
+            if (!svg.getAttribute('xmlns')) {
+              svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            }
+          });
+          
+          // 确保元素可见
+          const style = targetElement.style;
+          style.visibility = 'visible';
+          style.opacity = '1';
+          style.display = style.display === 'none' ? 'block' : style.display;
+        }
+      }
+    });
+    
+    // 验证生成的Canvas
+    if (canvas.width === 0 || canvas.height === 0) {
+      throw new Error('Generated canvas has zero dimensions');
     }
-  });
+    
+    return canvas;
+  } catch (error) {
+    console.error('Canvas rendering failed:', error);
+    throw new Error(`Canvas rendering failed: ${error}`);
+  }
 }
 
 /**
@@ -81,12 +138,10 @@ export async function renderSVGToCanvas(
   svgElement: SVGElement,
   options: RenderOptions = {}
 ): Promise<HTMLCanvasElement> {
-  // 对于SVG元素，我们可以直接使用html2canvas
-  // 或者使用传统的SVG序列化方��
   const {
     scale = 1,
     backgroundColor = null,
-    timeout = 5000
+    timeout = 10000 // 增加超时时间
   } = options;
 
   return new Promise((resolve, reject) => {
@@ -95,10 +150,31 @@ export async function renderSVGToCanvas(
     }, timeout);
 
     try {
+      console.log('renderSVGToCanvas: Starting SVG to Canvas conversion');
+      
       // 获取SVG尺寸
       const rect = svgElement.getBoundingClientRect();
-      const width = rect.width || svgElement.clientWidth || 300;
-      const height = rect.height || svgElement.clientHeight || 200;
+      let width = rect.width || svgElement.clientWidth;
+      let height = rect.height || svgElement.clientHeight;
+      
+      // 从SVG属性获取尺寸作为备选
+      if (width <= 0 || height <= 0) {
+        const svgWidth = svgElement.getAttribute('width');
+        const svgHeight = svgElement.getAttribute('height');
+        if (svgWidth && svgHeight) {
+          width = parseFloat(svgWidth);
+          height = parseFloat(svgHeight);
+        }
+      }
+      
+      // 使用默认尺寸作为最后备选
+      if (width <= 0 || height <= 0) {
+        width = 300;
+        height = 200;
+        console.warn('renderSVGToCanvas: Using default dimensions due to zero size');
+      }
+      
+      console.log('renderSVGToCanvas: SVG dimensions:', { width, height });
       
       // 创建Canvas
       const canvas = document.createElement('canvas');
@@ -120,17 +196,84 @@ export async function renderSVGToCanvas(
         ctx.fillRect(0, 0, width, height);
       }
       
+      // 克隆并优化SVG元素
+      const clonedSVG = svgElement.cloneNode(true) as SVGElement;
+      
+      // 确保SVG有正确的命名空间和属性
+      clonedSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      clonedSVG.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+      
+      // 设置明确的尺寸
+      if (!clonedSVG.getAttribute('width')) {
+        clonedSVG.setAttribute('width', width.toString());
+      }
+      if (!clonedSVG.getAttribute('height')) {
+        clonedSVG.setAttribute('height', height.toString());
+      }
+      
+      // 设置viewBox
+      if (!clonedSVG.getAttribute('viewBox')) {
+        clonedSVG.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      }
+      
+      // 移除可能导致问题的属性
+      const problematicAttrs = ['vector-effect'];
+      const removeProblematicAttrs = (element: Element) => {
+        problematicAttrs.forEach(attr => {
+          if (element.hasAttribute(attr)) {
+            element.removeAttribute(attr);
+          }
+        });
+        
+        // 递归处理子元素
+        Array.from(element.children).forEach(child => {
+          removeProblematicAttrs(child);
+        });
+      };
+      
+      removeProblematicAttrs(clonedSVG);
+      
       // 获取SVG的XML字符串
-      const svgData = new XMLSerializer().serializeToString(svgElement);
+      let svgData = new XMLSerializer().serializeToString(clonedSVG);
+      
+      // 清理和优化SVG字符串
+      svgData = svgData.replace(/vector-effect="[^"]*"/g, '');
+      
+      // 确保SVG字符串格式正确
+      if (!svgData.includes('xmlns="http://www.w3.org/2000/svg"')) {
+        svgData = svgData.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+      }
+      
+      console.log('renderSVGToCanvas: SVG data prepared:', {
+        length: svgData.length,
+        hasNamespace: svgData.includes('xmlns="http://www.w3.org/2000/svg"'),
+        preview: svgData.substring(0, 200) + '...'
+      });
+      
       const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
       const url = URL.createObjectURL(svgBlob);
       
       const img = new Image();
+      
       img.onload = () => {
         try {
+          console.log('renderSVGToCanvas: Image loaded successfully, drawing to canvas');
           ctx.drawImage(img, 0, 0, width, height);
           URL.revokeObjectURL(url);
           clearTimeout(timeoutId);
+          
+          // 验证Canvas内容
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const hasContent = imageData.data.some((value, index) => {
+            // 检查非透明像素 (alpha通道)
+            return index % 4 === 3 && value > 0;
+          });
+          
+          if (!hasContent) {
+            console.warn('renderSVGToCanvas: Canvas appears to be empty after drawing');
+          }
+          
+          console.log('renderSVGToCanvas: Canvas rendering completed successfully');
           resolve(canvas);
         } catch (error) {
           URL.revokeObjectURL(url);
@@ -139,14 +282,18 @@ export async function renderSVGToCanvas(
         }
       };
       
-      img.onerror = () => {
+      img.onerror = (error) => {
+        console.error('renderSVGToCanvas: Image loading failed:', error);
         URL.revokeObjectURL(url);
         clearTimeout(timeoutId);
         reject(new Error('SVG image loading failed'));
       };
       
+      // 设置图片源
       img.src = url;
+      
     } catch (error) {
+      console.error('renderSVGToCanvas: SVG serialization failed:', error);
       clearTimeout(timeoutId);
       reject(new Error(`SVG serialization failed: ${error}`));
     }