Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -2,48 +2,118 @@ import puppeteer from 'puppeteer';
 
 class ScreenshotService {
   async generateScreenshot(htmlContent, options = {}) {
-    const browser = await puppeteer.launch({
-      headless: true,
-      args: [
-        '--no-sandbox',
-        '--disable-setuid-sandbox',
-        '--disable-dev-shm-usage',
-        '--disable-accelerated-2d-canvas',
-        '--no-first-run',
-        '--no-zygote',
-        '--single-process', // <- this one doesn't work in Windows
-        '--disable-gpu'
-      ]
-    });
+    let browser = null;
     
     try {
+      console.log('Starting Puppeteer browser...');
+      
+      // 更适合容器环境的Puppeteer配置
+      browser = await puppeteer.launch({
+        headless: 'new', // 使用新的headless模式
+        args: [
+          '--no-sandbox',
+          '--disable-setuid-sandbox',
+          '--disable-dev-shm-usage',
+          '--disable-accelerated-2d-canvas',
+          '--no-first-run',
+          '--no-zygote',
+          '--disable-gpu',
+          '--disable-background-timer-throttling',
+          '--disable-backgrounding-occluded-windows',
+          '--disable-renderer-backgrounding',
+          '--disable-web-security',
+          '--disable-features=TranslateUI',
+          '--disable-extensions',
+          '--disable-component-extensions-with-background-pages',
+          '--disable-default-apps',
+          '--mute-audio',
+          '--no-default-browser-check',
+          '--autoplay-policy=user-gesture-required',
+          '--disable-background-mode',
+          '--disable-plugins',
+          '--disable-translate',
+          '--disable-ipc-flooding-protection',
+          '--memory-pressure-off',
+          '--max_old_space_size=4096'
+        ],
+        timeout: 30000, // 30秒超时
+        protocolTimeout: 30000
+      });
+      
+      console.log('Browser launched successfully');
+      
       const page = await browser.newPage();
+      console.log('New page created');
       
       // 设置页面视窗大小，匹配PPT的4:3比例
       await page.setViewport({ 
         width: 1000, 
         height: 750,
-        deviceScaleFactor: 2 // 高分辨率
+        deviceScaleFactor: 1 // 降低分辨率减少内存使用
       });
       
+      console.log('Viewport set');
+      
       // 设置HTML内容
-      await page.setContent(htmlContent, { waitUntil: 'networkidle0' });
+      await page.setContent(htmlContent, { 
+        waitUntil: 'domcontentloaded', // 改为更快的加载策略
+        timeout: 10000 
+      });
       
-      // 等待页面完全加载
-      await page.waitForTimeout(1000);
+      console.log('HTML content set');
+      
+      // 等待渲染完成（减少等待时间）
+      await page.waitForTimeout(500);
+      
+      console.log('Taking screenshot...');
       
       // 截图
       const screenshot = await page.screenshot({
         type: 'jpeg',
-        quality: 85,
-        fullPage: false
+        quality: 80, // 降低质量减少文件大小
+        fullPage: false,
+        timeout: 10000
       });
       
+      console.log('Screenshot taken successfully, size:', screenshot.length);
+      
       return screenshot;
+    } catch (error) {
+      console.error('Screenshot generation error:', error);
+      
+      // 返回一个错误图片而不是抛出异常
+      return this.generateErrorImage(error.message);
     } finally {
-      await browser.close();
+      if (browser) {
+        try {
+          await browser.close();
+          console.log('Browser closed');
+        } catch (closeError) {
+          console.error('Error closing browser:', closeError);
+        }
+      }
     }
   }
+  
+  // 生成错误提示图片
+  generateErrorImage(errorMessage = '截图生成失败') {
+    // 创建一个简单的错误图片的base64数据
+    const canvas = `
+      <svg width="1000" height="750" xmlns="http://www.w3.org/2000/svg">
+        <rect width="1000" height="750" fill="#f8f9fa"/>
+        <rect x="50" y="50" width="900" height="650" fill="white" stroke="#dee2e6" stroke-width="2"/>
+        <text x="500" y="350" text-anchor="middle" font-family="Arial" font-size="24" fill="#6c757d">
+          截图生成失败
+        </text>
+        <text x="500" y="400" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
+          ${errorMessage}
+        </text>
+      </svg>
+    `;
+    
+    // 将SVG转换为Buffer（简化版本）
+    return Buffer.from(canvas);
+  }
 }
 
 export default new ScreenshotService();