Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -25,8 +25,8 @@ class ScreenshotService {
         
         const launchOptions = {
           headless: 'new',
-          timeout: 60000,
-          protocolTimeout: 60000,
+          timeout: 30000, // 减少超时时间
+          protocolTimeout: 30000,
           args: [
             '--no-sandbox',
             '--disable-setuid-sandbox',
@@ -55,7 +55,7 @@ class ScreenshotService {
             '--disable-hang-monitor',
             '--disable-prompt-on-repost',
             '--memory-pressure-off',
-            '--max_old_space_size=1024'
+            '--max_old_space_size=512' // 减少内存使用
           ]
         };
 
@@ -72,6 +72,7 @@ class ScreenshotService {
         }
 
         this.browser = await puppeteer.launch(launchOptions);
+        console.log('✅ Puppeteer浏览器初始化成功');
 
         // 监听浏览器断开连接事件
         this.browser.on('disconnected', () => {
@@ -80,19 +81,18 @@ class ScreenshotService {
           this.isClosing = false;
         });
 
-        console.log('Puppeteer浏览器初始化完成');
         this.browserLaunchRetries = 0;
       } catch (error) {
-        console.error('Puppeteer浏览器初始化失败:', error);
+        console.error('❌ Puppeteer浏览器初始化失败:', error.message);
         this.browserLaunchRetries++;
         
         if (this.browserLaunchRetries <= this.maxBrowserLaunchRetries) {
           console.log(`尝试重新初始化浏览器 (${this.browserLaunchRetries}/${this.maxBrowserLaunchRetries})`);
-          await this.delay(3000); // 等待3秒后重试
+          await this.delay(2000); // 等待2秒后重试
           return this.initBrowser();
         } else {
           // 如果Puppeteer完全失败，返回null，使用fallback方法
-          console.warn('Puppeteer初始化完全失败，将使用fallback方法');
+          console.warn('⚠️ Puppeteer初始化完全失败，将使用fallback方法');
           return null;
         }
       }
@@ -102,6 +102,7 @@ class ScreenshotService {
     if (this.browser) {
       try {
         await this.browser.version();
+        console.log('✅ 浏览器连接正常');
       } catch (error) {
         console.warn('浏览器连接已断开，重新初始化:', error.message);
         this.browser = null;
@@ -164,25 +165,32 @@ class ScreenshotService {
 
   // 生成简化的PNG图片作为fallback
   generateFallbackImage(width, height, message = 'Screenshot not available') {
+    console.log(`🔄 生成fallback图片: ${width}x${height}`);
+    
     // 创建一个简单的SVG作为fallback
     const svg = `
       <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#f0f0f0"/>
+        <rect width="100%" height="100%" fill="#f8f9fa"/>
+        <rect x="10" y="10" width="${width-20}" height="${height-20}" 
+              fill="none" stroke="#dee2e6" stroke-width="2" stroke-dasharray="10,5"/>
+        <text x="50%" y="40%" text-anchor="middle" dominant-baseline="middle" 
+              font-family="Arial, sans-serif" font-size="28" fill="#495057" font-weight="bold">
+          PPT 预览图
+        </text>
         <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
-              font-family="Arial, sans-serif" font-size="24" fill="#666">
+              font-family="Arial, sans-serif" font-size="16" fill="#6c757d">
           ${message}
         </text>
         <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" 
-              font-family="Arial, sans-serif" font-size="16" fill="#999">
-          Size: ${width}x${height}
+              font-family="Arial, sans-serif" font-size="14" fill="#adb5bd">
+          尺寸: ${width} × ${height}
         </text>
+        <circle cx="50%" cy="70%" r="20" fill="none" stroke="#28a745" stroke-width="3">
+          <animate attributeName="stroke-dasharray" values="0,126;126,126" dur="2s" repeatCount="indefinite"/>
+        </circle>
       </svg>
     `;
     
-    // 将SVG转换为base64编码的PNG
-    const base64Svg = Buffer.from(svg).toString('base64');
-    const dataUrl = `data:image/svg+xml;base64,${base64Svg}`;
-    
     // 返回简单的占位图片数据
     return Buffer.from(svg, 'utf8');
   }
@@ -286,16 +294,16 @@ class ScreenshotService {
 
   async generateScreenshotWithPuppeteer(htmlContent, options = {}, retryCount = 0) {
     try {
+      console.log(`🎯 开始Puppeteer截图生成... (尝试 ${retryCount + 1}/${this.maxRetries + 1})`);
+      
       const browser = await this.initBrowser();
       if (!browser) {
         throw new Error('浏览器初始化失败');
       }
       
-      console.log(`开始生成截图... (Puppeteer尝试 ${retryCount + 1}/${this.maxRetries + 1})`);
-      
       // 从HTML中提取PPT的精确尺寸
       const dimensions = this.extractPPTDimensions(htmlContent);
-      console.log(`检测到PPT尺寸: ${dimensions.width}x${dimensions.height}`);
+      console.log(`📐 检测到PPT尺寸: ${dimensions.width}x${dimensions.height}`);
       
       // 优化HTML内容以确保精确截图
       const optimizedHtml = this.optimizeHtmlForScreenshot(htmlContent, dimensions.width, dimensions.height);
@@ -304,31 +312,36 @@ class ScreenshotService {
       let page = null;
       try {
         page = await browser.newPage();
+        console.log('📄 创建新页面成功');
         
         // 设置页面超时
-        page.setDefaultTimeout(45000);
-        page.setDefaultNavigationTimeout(45000);
+        page.setDefaultTimeout(20000); // 减少超时时间
+        page.setDefaultNavigationTimeout(20000);
         
         // 设置精确的viewport尺寸
         await page.setViewport({
           width: dimensions.width,
           height: dimensions.height,
-          deviceScaleFactor: options.deviceScaleFactor || 1, // 降低设备缩放因子以减少内存使用
+          deviceScaleFactor: 1, // 固定为1避免缩放问题
         });
+        console.log(`🖥️ 设置viewport: ${dimensions.width}x${dimensions.height}`);
         
         // 设置页面内容
         await page.setContent(optimizedHtml, {
           waitUntil: ['load', 'domcontentloaded'],
-          timeout: 45000
+          timeout: 20000
         });
+        console.log('📝 页面内容设置完成');
         
         // 等待页面完全渲染
-        await page.waitForTimeout(1500);
+        await page.waitForTimeout(1000); // 减少等待时间
+        console.log('⏱️ 等待渲染完成');
         
         // 执行截图，使用精确的剪裁区域
+        console.log('📸 开始执行截图...');
         const screenshot = await page.screenshot({
-          type: options.format || 'jpeg',
-          quality: options.quality || 90,
+          type: 'jpeg',
+          quality: 85, // 稍微降低质量提高速度
           clip: {
             x: 0,
             y: 0,
@@ -339,13 +352,14 @@ class ScreenshotService {
           captureBeyondViewport: false,
         });
         
-        console.log(`Puppeteer截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
+        console.log(`✅ Puppeteer截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
         return screenshot;
         
       } finally {
         if (page) {
           try {
             await page.close();
+            console.log('📄 页面已关闭');
           } catch (error) {
             console.warn('关闭页面时出错:', error.message);
           }
@@ -353,21 +367,22 @@ class ScreenshotService {
       }
       
     } catch (error) {
-      console.error(`Puppeteer截图生成失败 (尝试 ${retryCount + 1}):`, error.message);
+      console.error(`❌ Puppeteer截图生成失败 (尝试 ${retryCount + 1}):`, error.message);
       
       // 如果是目标关闭错误或连接断开，重置浏览器
       if (error.message.includes('Target closed') || 
           error.message.includes('Connection closed') ||
           error.message.includes('Protocol error')) {
-        console.log('检测到浏览器连接问题，重置浏览器实例');
+        console.log('🔄 检测到浏览器连接问题，重置浏览器实例');
         this.browser = null;
         this.isClosing = false;
       }
       
       // 如果还有重试机会，进行重试
       if (retryCount < this.maxRetries) {
-        console.log(`等待 ${(retryCount + 1) * 3} 秒后重试...`);
-        await this.delay((retryCount + 1) * 3000);
+        const waitTime = (retryCount + 1) * 2;
+        console.log(`⏳ 等待 ${waitTime} 秒后重试...`);
+        await this.delay(waitTime * 1000);
         return this.generateScreenshotWithPuppeteer(htmlContent, options, retryCount + 1);
       }
       
@@ -376,21 +391,26 @@ class ScreenshotService {
   }
 
   async generateScreenshot(htmlContent, options = {}) {
+    console.log('🎯 开始生成截图...');
+    
     try {
       // 首先尝试使用Puppeteer
-      return await this.generateScreenshotWithPuppeteer(htmlContent, options);
+      console.log('🚀 尝试使用Puppeteer生成截图');
+      const screenshot = await this.generateScreenshotWithPuppeteer(htmlContent, options);
+      console.log('✅ Puppeteer截图生成成功');
+      return screenshot;
     } catch (puppeteerError) {
-      console.warn('Puppeteer截图失败，使用fallback方法:', puppeteerError.message);
+      console.warn('⚠️ Puppeteer截图失败，使用fallback方法:', puppeteerError.message);
       
       // 如果Puppeteer失败，生成fallback图片
       const dimensions = this.extractPPTDimensions(htmlContent);
       const fallbackImage = this.generateFallbackImage(
         dimensions.width, 
         dimensions.height, 
-        'PPT Preview'
+        'Puppeteer不可用，��示占位图'
       );
       
-      console.log(`生成fallback图片，尺寸: ${dimensions.width}x${dimensions.height}`);
+      console.log(`📋 生成fallback图片，尺寸: ${dimensions.width}x${dimensions.height}`);
       return fallbackImage;
     }
   }