Upload public.js

backend/src/routes/public.js

@@ -243,8 +243,10 @@ router.post('/generate-share-link', async (req, res, next) => {
       pptUrl: `${protocol}://${baseUrl}/api/public/ppt/${userId}/${pptId}`,
       // Frontend view link
       viewUrl: `${protocol}://${baseUrl}/public/${userId}/${pptId}/${slideIndex}`,
-      // Screenshot link
+      // Screenshot link (需要用户交互)
       screenshotUrl: `${protocol}://${baseUrl}/api/public/screenshot/${userId}/${pptId}/${slideIndex}`,
+      // 新增：直接图片URL (无需用户交互)
+      directImageUrl: `${protocol}://${baseUrl}/api/public/direct-image/${userId}/${pptId}/${slideIndex}`,
       // Add PPT information
       pptInfo: {
         id: pptId,
@@ -622,4 +624,176 @@ router.get('/presentation/:userId/:pptId', async (req, res, next) => {
   }
 });
 
+// 新增：直接返回图片的端点 - 自动生成Base64图片
+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;
+    
+    console.log(`Direct image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}`);
+    
+    // Get PPT data
+    const fileName = `${pptId}.json`;
+    let pptData = null;
+    
+    for (let i = 0; i < githubService.repositories.length; i++) {
+      try {
+        const result = await githubService.getFile(userId, fileName, i);
+        if (result) {
+          pptData = result.content;
+          break;
+        }
+      } catch (error) {
+        continue;
+      }
+    }
+
+    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');
+      res.setHeader('Cache-Control', 'no-cache');
+      return res.send(svgBuffer);
+    }
+
+    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');
+      res.setHeader('Cache-Control', 'no-cache');
+      return res.send(svgBuffer);
+    }
+
+    // 生成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');
+    res.setHeader('X-Generation-Time', '< 10ms');
+    res.send(placeholderSvg);
+    
+  } 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');
+    res.send(errorSvg);
+  }
+});
+
+// 辅助函数：生成SVG
+function generateSlideSVG(slide, pptData, options = {}) {
+  const { width = 1000, height = 562 } = options;
+  
+  const backgroundStyle = slide.background?.color || '#ffffff';
+  
+  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;
+    
+    if (element.type === 'text') {
+      const fontSize = element.fontSize || 16;
+      const fontFamily = element.fontName || 'Arial';
+      const color = element.defaultColor || element.color || '#000000';
+      const content = (element.content || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      
+      return `<text x="${x + 10}" y="${y + fontSize}" 
+                font-family="${fontFamily}" font-size="${fontSize}" 
+                fill="${color}" font-weight="${element.bold ? 'bold' : 'normal'}"
+                font-style="${element.italic ? 'italic' : 'normal'}"
+                text-decoration="${element.underline ? 'underline' : 'none'}">${content}</text>`;
+    }
+    
+    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}"/>`;
+      }
+      
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"/>`;
+    }
+    
+    if (element.type === 'image' && element.src) {
+      return `<image x="${x}" y="${y}" width="${w}" height="${h}" href="${element.src}"/>`;
+    }
+    
+    return '';
+  }).join('');
+  
+  return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="${backgroundStyle}"/>
+    <g>${elementsHTML}</g>
+    <text x="${width-10}" y="${height-10}" text-anchor="end" font-family="Arial" font-size="10" fill="#999" opacity="0.7">
+      ${pptData.title || 'PPTist'} - Generated at ${new Date().toISOString()}
+    </text>
+  </svg>`;
+}
+
 export default router;