Upload public.js

backend/src/routes/public.js

@@ -624,13 +624,13 @@ router.get('/presentation/:userId/:pptId', async (req, res, next) => {
   }
 });
 
-// 新增：直接返回图片的端点 - 自动生成Base64图片
+// 新增：直接返回图片的端点 - 返回纯SVG图片，可被其他网站直接引用
 router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
   try {
     const { userId, pptId, slideIndex = 0 } = req.params;
-    const { format = 'jpeg', quality = 90 } = req.query;
+    const { format = 'svg', quality = 90, width: requestWidth, height: requestHeight } = req.query;
     
-    console.log(`Direct image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}`);
+    console.log(`Direct image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -649,92 +649,70 @@ router.get('/direct-image/:userId/:pptId/:slideIndex?', async (req, res, next) =
     }
 
     if (!pptData) {
-      // 返回404图片而不是HTML
-      const notFoundSvg = `
-        <svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-          <rect width="100%" height="100%" fill="#f8f9fa"/>
-          <text x="400" y="200" text-anchor="middle" font-family="Arial" font-size="24" fill="#6c757d">PPT Not Found</text>
-          <text x="400" y="250" text-anchor="middle" font-family="Arial" font-size="16" fill="#6c757d">PPT ${pptId} does not exist</text>
-        </svg>
-      `;
-      const svgBuffer = Buffer.from(notFoundSvg);
-      res.setHeader('Content-Type', 'image/svg+xml');
+      // 返回404图片SVG
+      const notFoundSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f8f9fa"/>
+        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">PPT Not Found</text>
+        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">PPT ${pptId} does not exist</text>
+      </svg>`;
+      
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
       res.setHeader('Cache-Control', 'no-cache');
-      return res.send(svgBuffer);
+      res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
+      return res.send(notFoundSvg);
     }
 
     const slideIdx = parseInt(slideIndex);
     if (slideIdx >= pptData.slides.length || slideIdx < 0) {
-      // 返回404图片
-      const invalidSlideSvg = `
-        <svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-          <rect width="100%" height="100%" fill="#f8f9fa"/>
-          <text x="400" y="200" text-anchor="middle" font-family="Arial" font-size="24" fill="#6c757d">Invalid Slide</text>
-          <text x="400" y="250" text-anchor="middle" font-family="Arial" font-size="16" fill="#6c757d">Slide ${slideIndex} not found</text>
-        </svg>
-      `;
-      const svgBuffer = Buffer.from(invalidSlideSvg);
-      res.setHeader('Content-Type', 'image/svg+xml');
+      // 返回404幻灯片SVG
+      const invalidSlideSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f8f9fa"/>
+        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">Invalid Slide</text>
+        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">Slide ${slideIndex} not found</text>
+      </svg>`;
+      
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
       res.setHeader('Cache-Control', 'no-cache');
-      return res.send(svgBuffer);
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      return res.send(invalidSlideSvg);
     }
 
-    // 生成PPT页面的SVG图片
+    // 计算图片尺寸
+    const defaultWidth = pptData.viewportSize || 1000;
+    const defaultHeight = Math.ceil(defaultWidth * (pptData.viewportRatio || 0.5625));
+    const finalWidth = requestWidth ? parseInt(requestWidth) : defaultWidth;
+    const finalHeight = requestHeight ? parseInt(requestHeight) : defaultHeight;
+    
+    // 生成PPT幻灯片的SVG图片
     const slide = pptData.slides[slideIdx];
-    const width = pptData.viewportSize || 1000;
-    const height = Math.ceil(width * (pptData.viewportRatio || 0.5625));
-    
-    // 生成SVG内容
-    const svgContent = generateSlideSVG(slide, pptData, { width, height });
-    
-    if (format === 'svg') {
-      res.setHeader('Content-Type', 'image/svg+xml');
-      res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
-      res.setHeader('X-Generation-Time', '< 10ms');
-      return res.send(svgContent);
-    }
-    
-    // 对于其他格式，返回占位图片
-    const placeholderSvg = `
-      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="${slide.background?.color || '#ffffff'}"/>
-        <g>
-          ${slide.elements.map(el => {
-            if (el.type === 'text') {
-              return `<text x="${el.left + 10}" y="${el.top + (el.fontSize || 16)}" 
-                        font-family="Arial" font-size="${el.fontSize || 16}" 
-                        fill="${el.defaultColor || el.color || '#000'}">${el.content || ''}</text>`;
-            }
-            if (el.type === 'shape') {
-              return `<rect x="${el.left}" y="${el.top}" width="${el.width}" height="${el.height}" 
-                        fill="${el.fill || '#cccccc'}" stroke="${el.outline?.color || 'none'}"/>`;
-            }
-            return '';
-          }).join('')}
-        </g>
-        <text x="${width/2}" y="${height-20}" text-anchor="middle" font-family="Arial" font-size="12" fill="#999">
-          ${pptData.title} - Slide ${slideIdx + 1}
-        </text>
-      </svg>
-    `;
-    
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.setHeader('Cache-Control', 'public, max-age=3600');
+    const svgContent = generateSlideSVG(slide, pptData, { 
+      width: finalWidth, 
+      height: finalHeight 
+    });
+    
+    // 设置正确的响应头，使其可以被其他网站作为图片引用
+    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+    res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
+    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
     res.setHeader('X-Generation-Time', '< 10ms');
-    res.send(placeholderSvg);
+    res.setHeader('X-Content-Source', 'direct-svg-generation');
+    
+    // 直接返回SVG图片内容
+    res.send(svgContent);
     
   } catch (error) {
     console.error('Direct image generation failed:', error);
     
-    // 返回错误图片
-    const errorSvg = `
-      <svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#fee"/>
-        <text x="400" y="200" text-anchor="middle" font-family="Arial" font-size="24" fill="#c00">Error</text>
-        <text x="400" y="250" text-anchor="middle" font-family="Arial" font-size="16" fill="#c00">Failed to generate image</text>
-      </svg>
-    `;
-    res.setHeader('Content-Type', 'image/svg+xml');
+    // 返回错误图片SVG
+    const errorSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100%" height="100%" fill="#ffe6e6"/>
+      <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#cc0000">Generation Error</text>
+      <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#cc0000">Failed to generate image: ${error.message}</text>
+    </svg>`;
+    
+    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Access-Control-Allow-Origin', '*');
     res.send(errorSvg);
   }
 });