Upload public.js

backend/src/routes/public.js

@@ -6,6 +6,129 @@ import { generateSlideHTML, generateExportPage, exportPPTToJSON, generateHTMLPre
 
 const router = express.Router();
 
+// 辅助函数：生成SVG - 改进版，支持更精确的PPT渲染
+function generateSlideSVG(slide, pptData, options = {}) {
+  const { width = 1000, height = 562 } = options;
+  
+  // 处理背景
+  let backgroundStyle = '#ffffff';
+  if (slide.background) {
+    if (slide.background.type === 'solid') {
+      backgroundStyle = slide.background.color || '#ffffff';
+    } else if (slide.background.type === 'gradient' && slide.background.gradient) {
+      // SVG渐变处理
+      const colors = slide.background.gradient.colors || [];
+      if (colors.length > 0) {
+        backgroundStyle = colors[0].color || '#ffffff';
+      }
+    }
+  }
+  
+  // 生成渐变定义（如果需要）
+  let gradientDefs = '';
+  if (slide.background?.type === 'gradient' && slide.background.gradient?.colors) {
+    const colors = slide.background.gradient.colors;
+    const gradientId = 'bg-gradient';
+    if (slide.background.gradient.type === 'linear') {
+      gradientDefs = `
+        <defs>
+          <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="0%"> 
+            ${colors.map((color, index) => 
+              `<stop offset="${(index / (colors.length - 1)) * 100}%" style="stop-color:${color.color};stop-opacity:1" />`
+            ).join('')}
+          </linearGradient>
+        </defs>
+      `;
+      backgroundStyle = `url(#${gradientId})`;
+    }
+  }
+  
+  // 渲染元素
+  const elementsHTML = slide.elements.map(element => {
+    const x = element.left || 0;
+    const y = element.top || 0;
+    const w = element.width || 100;
+    const h = element.height || 100;
+    const rotation = element.rotate || 0;
+    
+    // 变换属性
+    const transform = rotation !== 0 ? `transform="rotate(${rotation} ${x + w/2} ${y + h/2})"` : '';
+    
+    if (element.type === 'text') {
+      const fontSize = element.fontSize || 16;
+      const fontFamily = element.fontName || 'Arial, sans-serif';
+      const color = element.defaultColor || element.color || '#000000';
+      const fontWeight = element.bold ? 'bold' : 'normal';
+      const fontStyle = element.italic ? 'italic' : 'normal';
+      const textDecoration = element.underline ? 'underline' : 'none';
+      const textAnchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
+      
+      // 计算文本位置
+      let textX = x + 10;
+      if (element.align === 'center') textX = x + w/2;
+      else if (element.align === 'right') textX = x + w - 10;
+      
+      // 处理多行文本
+      const content = (element.content || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      const lines = content.split('\n');
+      
+      return `
+        <g ${transform}>
+          ${lines.map((line, index) => `
+            <text x="${textX}" y="${y + fontSize + (index * fontSize * 1.2)}" 
+                  font-family="${fontFamily}" 
+                  font-size="${fontSize}" 
+                  fill="${color}" 
+                  font-weight="${fontWeight}"
+                  font-style="${fontStyle}" 
+                  text-decoration="${textDecoration}"
+                  text-anchor="${textAnchor}">${line}</text>
+          `).join('')}
+        </g>
+      `;
+    }
+    
+    if (element.type === 'shape') {
+      const fill = element.fill || '#cccccc';
+      const stroke = element.outline?.color || 'none';
+      const strokeWidth = element.outline?.width || 0;
+      
+      if (element.shape === 'ellipse') {
+        const cx = x + w/2;
+        const cy = y + h/2;
+        const rx = w/2;
+        const ry = h/2;
+        return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
+      }
+      
+      // 默认矩形
+      const borderRadius = element.borderRadius || 0;
+      if (borderRadius > 0) {
+        return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${borderRadius}" ry="${borderRadius}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
+      }
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
+    }
+    
+    if (element.type === 'image' && element.src) {
+      // 检查是否是base64图片
+      if (element.src.startsWith('data:image/')) {
+        return `<image x="${x}" y="${y}" width="${w}" height="${h}" href="${element.src}" ${transform}/>`;
+      }
+      // 外部图片 - 在SVG中可能有跨域问题，显示占位符
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="#f0f0f0" stroke="#ccc" stroke-width="1" ${transform}/>
+              <text x="${x + w/2}" y="${y + h/2}" text-anchor="middle" font-size="12" fill="#666">图片</text>`;
+    }
+    
+    return '';
+  }).filter(Boolean).join('');
+  
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    ${gradientDefs}
+    <rect width="100%" height="100%" fill="${backgroundStyle}"/>
+    <g>${elementsHTML}</g>
+  </svg>`;
+}
+
 // Generate error page for frontend display
 function generateErrorPage(title, message) {
   return `
@@ -352,13 +475,13 @@ router.get('/screenshot/:userId/:pptId/:slideIndex?', async (req, res, next) =>
   }
 });
 
-// Image endpoint - 修改为直接返回图片，而不是截图工具页面
+// 🔥 关键修改：image端点现在直接返回SVG图片，不再返回截图工具页面
 router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
   try {
     const { userId, pptId, slideIndex = 0 } = req.params;
     const { format = 'svg', quality = 90, width: requestWidth, height: requestHeight } = req.query;
     
-    console.log(`🖼️ Image request (direct): userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
+    console.log(`🖼️ Direct Image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -827,127 +950,4 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
   }
 });
 
-// 辅助函数：生成SVG - 改进版，支持更精确的PPT渲染
-function generateSlideSVG(slide, pptData, options = {}) {
-  const { width = 1000, height = 562 } = options;
-  
-  // 处理背景
-  let backgroundStyle = '#ffffff';
-  if (slide.background) {
-    if (slide.background.type === 'solid') {
-      backgroundStyle = slide.background.color || '#ffffff';
-    } else if (slide.background.type === 'gradient' && slide.background.gradient) {
-      // SVG渐变处理
-      const colors = slide.background.gradient.colors || [];
-      if (colors.length > 0) {
-        backgroundStyle = colors[0].color || '#ffffff';
-      }
-    }
-  }
-  
-  // 生成渐变定义（如果需要）
-  let gradientDefs = '';
-  if (slide.background?.type === 'gradient' && slide.background.gradient?.colors) {
-    const colors = slide.background.gradient.colors;
-    const gradientId = 'bg-gradient';
-    if (slide.background.gradient.type === 'linear') {
-      gradientDefs = `
-        <defs>
-          <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="0%"> 
-            ${colors.map((color, index) => 
-              `<stop offset="${(index / (colors.length - 1)) * 100}%" style="stop-color:${color.color};stop-opacity:1" />`
-            ).join('')}
-          </linearGradient>
-        </defs>
-      `;
-      backgroundStyle = `url(#${gradientId})`;
-    }
-  }
-  
-  // 渲染元素
-  const elementsHTML = slide.elements.map(element => {
-    const x = element.left || 0;
-    const y = element.top || 0;
-    const w = element.width || 100;
-    const h = element.height || 100;
-    const rotation = element.rotate || 0;
-    
-    // 变换属性
-    const transform = rotation !== 0 ? `transform="rotate(${rotation} ${x + w/2} ${y + h/2})"` : '';
-    
-    if (element.type === 'text') {
-      const fontSize = element.fontSize || 16;
-      const fontFamily = element.fontName || 'Arial, sans-serif';
-      const color = element.defaultColor || element.color || '#000000';
-      const fontWeight = element.bold ? 'bold' : 'normal';
-      const fontStyle = element.italic ? 'italic' : 'normal';
-      const textDecoration = element.underline ? 'underline' : 'none';
-      const textAnchor = element.align === 'center' ? 'middle' : element.align === 'right' ? 'end' : 'start';
-      
-      // 计算文本位置
-      let textX = x + 10;
-      if (element.align === 'center') textX = x + w/2;
-      else if (element.align === 'right') textX = x + w - 10;
-      
-      // 处理多行文本
-      const content = (element.content || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      const lines = content.split('\n');
-      
-      return `
-        <g ${transform}>
-          ${lines.map((line, index) => `
-            <text x="${textX}" y="${y + fontSize + (index * fontSize * 1.2)}" 
-                  font-family="${fontFamily}" 
-                  font-size="${fontSize}" 
-                  fill="${color}" 
-                  font-weight="${fontWeight}"
-                  font-style="${fontStyle}" 
-                  text-decoration="${textDecoration}"
-                  text-anchor="${textAnchor}">${line}</text>
-          `).join('')}
-        </g>
-      `;
-    }
-    
-    if (element.type === 'shape') {
-      const fill = element.fill || '#cccccc';
-      const stroke = element.outline?.color || 'none';
-      const strokeWidth = element.outline?.width || 0;
-      
-      if (element.shape === 'ellipse') {
-        const cx = x + w/2;
-        const cy = y + h/2;
-        const rx = w/2;
-        const ry = h/2;
-        return `<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
-      }
-      
-      // 默认矩形
-      const borderRadius = element.borderRadius || 0;
-      if (borderRadius > 0) {
-        return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${borderRadius}" ry="${borderRadius}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
-      }
-      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${transform}/>`;
-    }
-    
-    if (element.type === 'image' && element.src) {
-      // 检查是否是base64图片
-      if (element.src.startsWith('data:image/')) {
-        return `<image x="${x}" y="${y}" width="${w}" height="${h}" href="${element.src}" ${transform}/>`;
-      }
-      // 外部图片 - 在SVG中可能有跨域问题，显示占位符
-      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="#f0f0f0" stroke="#ccc" stroke-width="1" ${transform}/>
-              <text x="${x + w/2}" y="${y + h/2}" text-anchor="middle" font-size="12" fill="#666">图片</text>`;
-    }
-    
-    return '';
-  }).filter(Boolean).join('');
-  
-  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    ${gradientDefs}
-    <rect width="100%" height="100%" fill="${backgroundStyle}"/>
-    <g>${elementsHTML}</g>
-  </svg>`;
-}
-
 export default router;