Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -1,18 +1,21 @@
 import puppeteer from 'puppeteer';
+// 添加Playwright作为备用截图引擎
+import { chromium } from 'playwright';
 
 class ScreenshotService {
   constructor() {
     this.browser = null;
+    this.playwrightBrowser = null; // 添加Playwright浏览器实例
     this.isInitialized = false;
     this.maxRetries = 2;
     this.browserLaunchRetries = 0;
     this.maxBrowserLaunchRetries = 2;
     this.isClosing = false;
     this.isHuggingFaceSpace = process.env.SPACE_ID || process.env.HF_SPACE_ID;
+    this.preferredEngine = 'puppeteer'; // 优先使用的截图引擎
   }
 
   async initBrowser() {
-    // 在Hugging Face Space环境中，Puppeteer可能不稳定，尝试更保守的配置
     if (this.isClosing) {
       console.log('浏览器正在关闭中，等待重新初始化...');
       this.browser = null;
@@ -25,7 +28,7 @@ class ScreenshotService {
         
         const launchOptions = {
           headless: 'new',
-          timeout: 60000, // 增加超时时间
+          timeout: 60000,
           protocolTimeout: 60000,
           args: [
             '--no-sandbox',
@@ -55,8 +58,7 @@ class ScreenshotService {
             '--disable-hang-monitor',
             '--disable-prompt-on-repost',
             '--memory-pressure-off',
-            '--max_old_space_size=1024', // 增加内存限制
-            // 添加更多Hugging Face Space兼容性选项
+            '--max_old_space_size=1024',
             '--disable-background-media-suspend',
             '--disable-backgrounding-occluded-windows',
             '--disable-renderer-backgrounding',
@@ -76,7 +78,6 @@ class ScreenshotService {
           ]
         };
 
-        // 如果是Hugging Face Space环境，使用单进程模式
         if (this.isHuggingFaceSpace) {
           console.log('检测到Hugging Face Space环境，使用单进程模式');
           launchOptions.args.push(
@@ -87,7 +88,6 @@ class ScreenshotService {
           );
         }
 
-        // 尝试找到Chrome可执行文件路径
         try {
           const chromePath = process.env.CHROME_BIN || 
                            process.env.GOOGLE_CHROME_BIN || 
@@ -105,7 +105,6 @@ class ScreenshotService {
         this.browser = await puppeteer.launch(launchOptions);
         console.log('✅ Puppeteer浏览器初始化成功');
 
-        // 监听浏览器断开连接事件
         this.browser.on('disconnected', () => {
           console.log('Puppeteer浏览器连接断开');
           this.browser = null;
@@ -119,17 +118,15 @@ class ScreenshotService {
         
         if (this.browserLaunchRetries <= this.maxBrowserLaunchRetries) {
           console.log(`尝试重新初始化浏览器 (${this.browserLaunchRetries}/${this.maxBrowserLaunchRetries})`);
-          await this.delay(3000); // 增加等待时间
+          await this.delay(3000);
           return this.initBrowser();
         } else {
-          // 如果Puppeteer完全失败，返回null，使用fallback方法
           console.warn('⚠️ Puppeteer初始化完全失败，将使用fallback方法');
           return null;
         }
       }
     }
 
-    // 验证浏览器是否仍然连接
     if (this.browser) {
       try {
         await this.browser.version();
@@ -144,6 +141,56 @@ class ScreenshotService {
     return this.browser;
   }
 
+  async initPlaywrightBrowser() {
+    if (this.playwrightBrowser) {
+      try {
+        const context = await this.playwrightBrowser.newContext();
+        await context.close();
+        return this.playwrightBrowser;
+      } catch (error) {
+        console.warn('Playwright浏览器连接已断开，重新初始化');
+        this.playwrightBrowser = null;
+      }
+    }
+
+    try {
+      console.log('初始化Playwright浏览器...');
+      
+      const launchOptions = {
+        headless: true,
+        timeout: 30000,
+        args: [
+          '--no-sandbox',
+          '--disable-setuid-sandbox',
+          '--disable-dev-shm-usage',
+          '--disable-gpu',
+          '--disable-extensions',
+          '--no-first-run',
+          '--disable-background-timer-throttling',
+          '--disable-renderer-backgrounding',
+          '--disable-backgrounding-occluded-windows'
+        ]
+      };
+
+      if (this.isHuggingFaceSpace) {
+        console.log('检测到Hugging Face Space环境，使用Playwright优化配置');
+        launchOptions.args.push(
+          '--single-process',
+          '--no-zygote',
+          '--disable-web-security'
+        );
+      }
+
+      this.playwrightBrowser = await chromium.launch(launchOptions);
+      console.log('✅ Playwright浏览器初始化成功');
+      
+      return this.playwrightBrowser;
+    } catch (error) {
+      console.error('❌ Playwright浏览器初始化失败:', error.message);
+      return null;
+    }
+  }
+
   async closeBrowser() {
     if (this.browser && !this.isClosing) {
       try {
@@ -160,15 +207,26 @@ class ScreenshotService {
     }
   }
 
-  // 延迟函数
+  async closePlaywrightBrowser() {
+    if (this.playwrightBrowser) {
+      try {
+        console.log('正在关闭Playwright浏览器...');
+        await this.playwrightBrowser.close();
+        console.log('Playwright浏览器已关闭');
+      } catch (error) {
+        console.warn('关闭Playwright浏览器时出错:', error.message);
+      } finally {
+        this.playwrightBrowser = null;
+      }
+    }
+  }
+
   delay(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
-  // 从HTML中提取PPT尺寸信息
   extractPPTDimensions(htmlContent) {
     try {
-      // 从JavaScript中提取PPT_DIMENSIONS
       const dimensionMatch = htmlContent.match(/window\.PPT_DIMENSIONS\s*=\s*{\s*width:\s*(\d+),\s*height:\s*(\d+)\s*}/);
       if (dimensionMatch) {
         return {
@@ -177,7 +235,6 @@ class ScreenshotService {
         };
       }
 
-      // 从viewport meta标签中提取
       const viewportMatch = htmlContent.match(/width=(\d+),\s*height=(\d+)/);
       if (viewportMatch) {
         return {
@@ -186,7 +243,6 @@ class ScreenshotService {
         };
       }
 
-      // 默认尺寸
       return { width: 960, height: 720 };
     } catch (error) {
       console.warn('提取PPT尺寸失败，使用默认尺寸:', error.message);
@@ -194,11 +250,9 @@ 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="#f8f9fa"/>
@@ -222,21 +276,17 @@ class ScreenshotService {
       </svg>
     `;
     
-    // 返回简单的占位图片数据
     return Buffer.from(svg, 'utf8');
   }
 
-  // 优化HTML内容以确保精确截图
   optimizeHtmlForScreenshot(htmlContent, targetWidth, targetHeight) {
     console.log(`优化HTML for精确截图, 目标尺寸: ${targetWidth}x${targetHeight}`);
 
-    // 在<head>标签后立即插入截图优化代码
     const optimizedHtml = htmlContent.replace(
       /(<head[^>]*>)/i,
       `$1
         <meta name="screenshot-mode" content="true">
         <style id="screenshot-precise-control">
-          /* 截图模式：绝对精确的尺寸控制 */
           *, *::before, *::after {
             margin: 0 !important;
             padding: 0 !important;
@@ -298,7 +348,6 @@ class ScreenshotService {
             z-index: 1 !important;
           }
           
-          /* 隐藏所有滚动条 */
           html::-webkit-scrollbar,
           body::-webkit-scrollbar,
           *::-webkit-scrollbar {
@@ -309,7 +358,6 @@ class ScreenshotService {
           
           html { scrollbar-width: none !important; }
           
-          /* 禁用用户交互 */
           * {
             -webkit-user-select: none !important;
             -moz-user-select: none !important;
@@ -332,47 +380,39 @@ class ScreenshotService {
         throw new Error('浏览器初始化失败');
       }
       
-      // 从HTML中提取PPT的精确尺寸
       const dimensions = this.extractPPTDimensions(htmlContent);
       console.log(`📐 检测到PPT尺寸: ${dimensions.width}x${dimensions.height}`);
       
-      // 优化HTML内容以确保精确截图
       const optimizedHtml = this.optimizeHtmlForScreenshot(htmlContent, dimensions.width, dimensions.height);
       
-      // 创建新页面
       let page = null;
       try {
         page = await browser.newPage();
         console.log('📄 创建新页面成功');
         
-        // 设置页面超时
-        page.setDefaultTimeout(20000); // 减少超时时间
+        page.setDefaultTimeout(20000);
         page.setDefaultNavigationTimeout(20000);
         
-        // 设置精确的viewport尺寸
         await page.setViewport({
           width: dimensions.width,
           height: dimensions.height,
-          deviceScaleFactor: 1, // 固定为1避免缩放问题
+          deviceScaleFactor: 1,
         });
         console.log(`🖥️ 设置viewport: ${dimensions.width}x${dimensions.height}`);
         
-        // 设置页面内容
         await page.setContent(optimizedHtml, {
           waitUntil: ['load', 'domcontentloaded'],
           timeout: 20000
         });
         console.log('📝 页面内容设置完成');
         
-        // 等待页面完全渲染
-        await page.waitForTimeout(1000); // 减少等待时间
+        await page.waitForTimeout(1000);
         console.log('⏱️ 等待渲染完成');
         
-        // 执行截图，使用精确的剪裁区域
         console.log('📸 开始执行截图...');
         const screenshot = await page.screenshot({
           type: 'jpeg',
-          quality: 85, // 稍微降低质量提高速度
+          quality: 85,
           clip: {
             x: 0,
             y: 0,
@@ -400,7 +440,6 @@ class ScreenshotService {
     } catch (error) {
       console.error(`❌ Puppeteer截图生成失败 (尝试 ${retryCount + 1}):`, error.message);
       
-      // 如果是目标关闭错误或连接断开，重置浏览器
       if (error.message.includes('Target closed') || 
           error.message.includes('Connection closed') ||
           error.message.includes('Protocol error')) {
@@ -409,7 +448,6 @@ class ScreenshotService {
         this.isClosing = false;
       }
       
-      // 如果还有重试机会，进行重试
       if (retryCount < this.maxRetries) {
         const waitTime = (retryCount + 1) * 2;
         console.log(`⏳ 等待 ${waitTime} 秒后重试...`);
@@ -421,47 +459,133 @@ class ScreenshotService {
     }
   }
 
-  async generateScreenshot(htmlContent, options = {}) {
-    console.log('🎯 开始生成截图...');
-    
+  async generateScreenshotWithPlaywright(htmlContent, options = {}) {
     try {
-      // 首先尝试使用Puppeteer
-      console.log('🚀 尝试使用Puppeteer生成截图');
-      const screenshot = await this.generateScreenshotWithPuppeteer(htmlContent, options);
-      console.log('✅ Puppeteer截图生成成功');
-      return screenshot;
-    } catch (puppeteerError) {
-      console.warn('⚠️ Puppeteer截图失败，使用fallback方法:', puppeteerError.message);
+      console.log('🎭 开始Playwright截图生成...');
       
-      // 如果Puppeteer失败，生成fallback图片
+      const browser = await this.initPlaywrightBrowser();
+      if (!browser) {
+        throw new Error('Playwright浏览器初始化失败');
+      }
+
       const dimensions = this.extractPPTDimensions(htmlContent);
-      const fallbackImage = this.generateFallbackImage(
-        dimensions.width, 
-        dimensions.height, 
-        'Puppeteer不可用，显示占位图'
-      );
+      console.log(`📐 Playwright检测到PPT尺寸: ${dimensions.width}x${dimensions.height}`);
+
+      const context = await browser.newContext({
+        viewport: {
+          width: dimensions.width,
+          height: dimensions.height
+        },
+        deviceScaleFactor: 1,
+        hasTouch: false,
+        isMobile: false
+      });
+
+      const page = await context.newPage();
       
-      console.log(`📋 生成fallback图片，尺寸: ${dimensions.width}x${dimensions.height}`);
-      return fallbackImage;
+      await page.setContent(htmlContent, {
+        waitUntil: 'domcontentloaded',
+        timeout: 15000
+      });
+
+      await page.waitForTimeout(800);
+
+      const screenshot = await page.screenshot({
+        type: 'jpeg',
+        quality: 90,
+        clip: {
+          x: 0,
+          y: 0,
+          width: dimensions.width,
+          height: dimensions.height
+        },
+        animations: 'disabled'
+      });
+
+      await context.close();
+      
+      console.log(`✅ Playwright截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
+      return screenshot;
+      
+    } catch (error) {
+      console.error('❌ Playwright截图生成失败:', error.message);
+      throw error;
+    }
+  }
+
+  async generateScreenshot(htmlContent, options = {}) {
+    console.log('🎯 开始生成截图...');
+    
+    if (this.preferredEngine === 'puppeteer') {
+      try {
+        console.log('🚀 尝试使用Puppeteer生成截图');
+        const screenshot = await this.generateScreenshotWithPuppeteer(htmlContent, options);
+        console.log('✅ Puppeteer截图生成成功');
+        return screenshot;
+      } catch (puppeteerError) {
+        console.warn('⚠️ Puppeteer截图失败，尝试Playwright:', puppeteerError.message);
+        
+        try {
+          const screenshot = await this.generateScreenshotWithPlaywright(htmlContent, options);
+          console.log('✅ Playwright截图生成成功');
+          this.preferredEngine = 'playwright';
+          return screenshot;
+        } catch (playwrightError) {
+          console.warn('⚠️ Playwright截图也失败，使用fallback方法:', playwrightError.message);
+        }
+      }
+    } else {
+      try {
+        console.log('🎭 尝试使用Playwright生成截图');
+        const screenshot = await this.generateScreenshotWithPlaywright(htmlContent, options);
+        console.log('✅ Playwright截图生成成功');
+        return screenshot;
+      } catch (playwrightError) {
+        console.warn('⚠️ Playwright截图失败，尝试Puppeteer:', playwrightError.message);
+        
+        try {
+          const screenshot = await this.generateScreenshotWithPuppeteer(htmlContent, options);
+          console.log('✅ Puppeteer截图生成成功');
+          return screenshot;
+        } catch (puppeteerError) {
+          console.warn('⚠️ Puppeteer截图也失败，使用fallback方法:', puppeteerError.message);
+        }
+      }
+    }
+    
+    const dimensions = this.extractPPTDimensions(htmlContent);
+    const fallbackImage = this.generateFallbackImage(
+      dimensions.width, 
+      dimensions.height, 
+      '截图引擎不可用，显示占位图'
+    );
+    
+    console.log(`📋 生成fallback图片，尺寸: ${dimensions.width}x${dimensions.height}`);
+    return fallbackImage;
+  }
+
+  setPreferredEngine(engine) {
+    if (['puppeteer', 'playwright'].includes(engine)) {
+      this.preferredEngine = engine;
+      console.log(`截图引擎偏好设置为: ${engine}`);
     }
   }
 
-  // 兼容旧方法名
   async captureScreenshot(htmlContent, width, height, options = {}) {
     console.log('使用兼容方法captureScreenshot，建议使用generateScreenshot');
     return this.generateScreenshot(htmlContent, options);
   }
 
-  // 清理资源
   async cleanup() {
-    await this.closeBrowser();
+    await Promise.all([
+      this.closeBrowser(),
+      this.closePlaywrightBrowser()
+    ]);
   }
 }
 
-// 创建单例实例
 const screenshotService = new ScreenshotService();
 
-// 进程退出时清理资源
 process.on('exit', async () => {
   await screenshotService.cleanup();
 });