Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -1,19 +1,15 @@
 import puppeteer from 'puppeteer';
 
 class ScreenshotService {
-  async generateScreenshot(htmlContent, options = {}) {
-    let browser = null;
-    let pptDimensions = { width: 1000, height: 750 }; // 默认值
-    
-    try {
-      console.log('Starting Puppeteer browser...');
-      
-      // 提取PPT的实际尺寸和长宽比
-      pptDimensions = this.extractPptDimensions(htmlContent);
-      console.log('Extracted PPT dimensions:', pptDimensions);
-      
-      // 更适合容器环境的Puppeteer配置
-      browser = await puppeteer.launch({
+  constructor() {
+    this.browser = null;
+    this.isInitialized = false;
+  }
+
+  async initBrowser() {
+    if (!this.browser) {
+      console.log('初始化Puppeteer浏览器...');
+      this.browser = await puppeteer.launch({
         headless: 'new',
         args: [
           '--no-sandbox',
@@ -22,333 +18,406 @@ class ScreenshotService {
           '--disable-accelerated-2d-canvas',
           '--no-first-run',
           '--no-zygote',
+          '--single-process',
           '--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',
+          '--hide-scrollbars',
           '--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,
-        protocolTimeout: 30000
-      });
-      
-      console.log('Browser launched successfully');
-      
-      const page = await browser.newPage();
-      console.log('New page created');
-      
-      // 设置页面视窗大小为PPT的精确尺寸
-      await page.setViewport({ 
-        width: pptDimensions.width,
-        height: pptDimensions.height,
-        deviceScaleFactor: 2 // 高分辨率
-      });
-      
-      console.log(`Viewport set to exact PPT size: ${pptDimensions.width}x${pptDimensions.height}`);
-      
-      // 修改HTML内容，确保PPT容器精确匹配视窗尺寸，消除白边
-      const modifiedHtmlContent = this.modifyHtmlForScreenshot(htmlContent, pptDimensions);
-      
-      // 设置HTML内容
-      await page.setContent(modifiedHtmlContent, { 
-        waitUntil: 'domcontentloaded',
-        timeout: 10000 
-      });
-      
-      console.log('HTML content set');
-      
-      // 等待渲染完成
-      await page.waitForTimeout(1500);
-      
-      // 验证页面中的PPT容器尺寸是否精确匹配
-      const actualDimensions = await page.evaluate(() => {
-        const container = document.getElementById('slideContainer');
-        const body = document.body;
-        const html = document.documentElement;
-        
-        if (container) {
-          const rect = container.getBoundingClientRect();
-          return {
-            container: {
-              width: rect.width,
-              height: rect.height,
-              left: rect.left,
-              top: rect.top
-            },
-            body: {
-              width: body.offsetWidth,
-              height: body.offsetHeight
-            },
-            html: {
-              width: html.offsetWidth,
-              height: html.offsetHeight
-            },
-            viewport: {
-              width: window.innerWidth,
-              height: window.innerHeight
-            }
-          };
-        }
-        return null;
-      });
-      
-      console.log('Page dimensions verification:', actualDimensions);
-      
-      // 确保页面尺寸完全匹配PPT尺寸
-      if (actualDimensions && (
-        Math.abs(actualDimensions.viewport.width - pptDimensions.width) > 1 ||
-        Math.abs(actualDimensions.viewport.height - pptDimensions.height) > 1
-      )) {
-        console.warn('Page dimensions do not match PPT dimensions exactly, adjusting...');
-        await page.setViewport({ 
-          width: pptDimensions.width,
-          height: pptDimensions.height,
-          deviceScaleFactor: 2
-        });
-        await page.waitForTimeout(500);
-      }
-      
-      console.log('Taking precise screenshot...');
-      
-      // 截取精确的PPT内容区域，不包含任何白边
-      const screenshot = await page.screenshot({
-        type: 'jpeg',
-        quality: 95,
-        // 使用clip精确截取PPT内容区域
-        clip: {
-          x: 0,
-          y: 0,
-          width: pptDimensions.width,
-          height: pptDimensions.height
-        },
-        timeout: 10000
+          '--disable-default-apps',
+          '--disable-background-networking',
+          '--disable-sync',
+          '--metrics-recording-only',
+          '--disable-domain-reliability',
+          '--disable-component-extensions-with-background-pages',
+          '--force-device-scale-factor=1',
+          '--enable-precise-memory-info'
+        ]
       });
-      
-      console.log('Screenshot taken successfully, size:', screenshot.length);
-      
-      return screenshot;
-    } catch (error) {
-      console.error('Screenshot generation error:', error);
-      
-      // 返回一个错误图片而不是抛出异常
-      return this.generateErrorImage(error.message, pptDimensions);
-    } finally {
-      if (browser) {
-        try {
-          await browser.close();
-          console.log('Browser closed');
-        } catch (closeError) {
-          console.error('Error closing browser:', closeError);
-        }
-      }
+      console.log('Puppeteer浏览器初始化完成');
     }
+    return this.browser;
   }
-  
-  // 从HTML内容中提取PPT尺寸信息和长宽比
-  extractPptDimensions(htmlContent) {
-    // 方法1：从JavaScript变量中提取尺寸 - 这是最准确的方法
-    const dimensionsMatch = htmlContent.match(/window\.PPT_DIMENSIONS\s*=\s*{\s*width:\s*(\d+),\s*height:\s*(\d+)\s*}/);
-    if (dimensionsMatch) {
-      const width = parseInt(dimensionsMatch[1]);
-      const height = parseInt(dimensionsMatch[2]);
-      console.log('Extracted dimensions from JavaScript:', { width, height });
-      return { width, height };
-    }
-    
-    // 方法2：从CSS样式中提取尺寸
-    const cssMatch = htmlContent.match(/\.slide-container\s*{\s*[^}]*width:\s*(\d+)px;[^}]*height:\s*(\d+)px;/s);
-    if (cssMatch) {
-      const width = parseInt(cssMatch[1]);
-      const height = parseInt(cssMatch[2]);
-      console.log('Extracted dimensions from CSS:', { width, height });
-      return { width, height };
-    }
-    
-    // 方法3：从内联样式中提取尺寸
-    const inlineMatch = htmlContent.match(/width:\s*(\d+)px[^;]*;\s*height:\s*(\d+)px/);
-    if (inlineMatch) {
-      const width = parseInt(inlineMatch[1]);
-      const height = parseInt(inlineMatch[2]);
-      console.log('Extracted dimensions from inline styles:', { width, height });
-      return { width, height };
+
+  async closeBrowser() {
+    if (this.browser) {
+      await this.browser.close();
+      this.browser = null;
+      console.log('Puppeteer浏览器已关闭');
     }
-    
-    // 默认尺寸 - 使用标准PPT 16:9 比例
-    console.warn('Could not extract PPT dimensions from HTML, using default 16:9 ratio');
-    return { width: 1280, height: 720 }; // 16:9 标准比例
   }
-  
-  // 修改HTML内容以适应截图需求，确保零白边
-  modifyHtmlForScreenshot(htmlContent, pptDimensions) {
-    const { width, height } = pptDimensions;
-    
-    // 创建完全匹配PPT尺寸的HTML，消除所有可能的白边
-    let modifiedHtml = htmlContent;
-    
-    // 设置严格的CSS样式，确保页面尺寸完全匹配PPT尺寸
-    modifiedHtml = modifiedHtml.replace(
-      /<style>[\s\S]*?<\/style>/,
-      `<style>
-        * {
-          margin: 0 !important;
-          padding: 0 !important;
-          box-sizing: border-box !important;
-          border: none !important;
-        }
-        
-        html {
-          width: ${width}px !important;
-          height: ${height}px !important;
-          overflow: hidden !important;
-          background: transparent !important;
-          min-width: ${width}px !important;
-          min-height: ${height}px !important;
-          max-width: ${width}px !important;
-          max-height: ${height}px !important;
-        }
-        
-        body {
-          width: ${width}px !important;
-          height: ${height}px !important;
-          overflow: hidden !important;
-          font-family: 'Microsoft YaHei', Arial, sans-serif !important;
-          background: transparent !important;
-          position: absolute !important;
-          top: 0 !important;
-          left: 0 !important;
-          margin: 0 !important;
-          padding: 0 !important;
-          min-width: ${width}px !important;
-          min-height: ${height}px !important;
-          max-width: ${width}px !important;
-          max-height: ${height}px !important;
-        }
-        
-        .slide-container {
-          width: ${width}px !important;
-          height: ${height}px !important;
-          position: absolute !important;
-          top: 0 !important;
-          left: 0 !important;
-          margin: 0 !important;
-          padding: 0 !important;
-          overflow: hidden !important;
-          background-color: var(--slide-bg-color, #ffffff) !important;
-          transform: none !important;
-          transform-origin: top left !important;
-          min-width: ${width}px !important;
-          min-height: ${height}px !important;
-          max-width: ${width}px !important;
-          max-height: ${height}px !important;
-        }
-        
-        /* 确保所有元素都相对于slide-container定位 */
-        .slide-container > * {
-          position: absolute !important;
-        }
-        
-        /* 确保背景图片也严格匹配尺寸 */
-        .slide-container::before {
-          width: ${width}px !important;
-          height: ${height}px !important;
-          top: 0 !important;
-          left: 0 !important;
-          margin: 0 !important;
-          padding: 0 !important;
-        }
-      </style>`
-    );
+
+  async modifyHtmlForScreenshot(htmlContent, targetWidth, targetHeight) {
+    console.log(`开始修改HTML for截图, 目标尺寸: ${targetWidth}x${targetHeight}`);
     
-    // 移除所有可能影响尺寸的JavaScript，确保固定尺寸
-    modifiedHtml = modifiedHtml.replace(
-      /<script>[\s\S]*?<\/script>/g,
-      `<script>
-        // 截图模式 - 固定尺寸，消除白边
-        console.log('Screenshot mode - exact dimensions: ${width}x${height}');
-        
-        // 确保页面加载完成后设置精确的尺寸
-        window.addEventListener('load', function() {
-          // 设置容器精确尺寸
-          const container = document.getElementById('slideContainer');
-          if (container) {
-            container.style.cssText = \`
-              width: ${width}px !important;
-              height: ${height}px !important;
-              position: absolute !important;
-              top: 0 !important;
-              left: 0 !important;
-              margin: 0 !important;
-              padding: 0 !important;
-              transform: none !important;
-              overflow: hidden !important;
-            \`;
+    // 创建完全针对截图优化的HTML版本
+    const optimizedHtml = htmlContent.replace(
+      /<head>/i,
+      `<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=${targetWidth}, height=${targetHeight}, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
+        <!-- 截图模式标识 -->
+        <meta name="screenshot-mode" content="true">
+        <!-- 强制精确尺寸控制 -->
+        <style id="screenshot-optimization">
+          /* 全局重置 - 完全消除边距 */
+          *, *::before, *::after {
+            margin: 0 !important;
+            padding: 0 !important;
+            box-sizing: border-box !important;
+            border: none !important;
+            outline: none !important;
           }
           
-          // 设置body和html精确尺寸
-          document.body.style.cssText = \`
-            width: ${width}px !important;
-            height: ${height}px !important;
+          /* 根元素强制设置 */
+          html {
+            width: ${targetWidth}px !important;
+            height: ${targetHeight}px !important;
+            min-width: ${targetWidth}px !important;
+            min-height: ${targetHeight}px !important;
+            max-width: ${targetWidth}px !important;
+            max-height: ${targetHeight}px !important;
+            overflow: hidden !important;
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
             margin: 0 !important;
             padding: 0 !important;
+            border: none !important;
+            outline: none !important;
+            transform: none !important;
+            transform-origin: top left !important;
+          }
+          
+          /* Body元素强制设置 */
+          body {
+            width: ${targetWidth}px !important;
+            height: ${targetHeight}px !important;
+            min-width: ${targetWidth}px !important;
+            min-height: ${targetHeight}px !important;
+            max-width: ${targetWidth}px !important;
+            max-height: ${targetHeight}px !important;
             overflow: hidden !important;
-            position: absolute !important;
+            position: fixed !important;
             top: 0 !important;
             left: 0 !important;
-          \`;
-          
-          document.documentElement.style.cssText = \`
-            width: ${width}px !important;
-            height: ${height}px !important;
             margin: 0 !important;
             padding: 0 !important;
+            border: none !important;
+            outline: none !important;
+            transform: none !important;
+            transform-origin: top left !important;
+          }
+          
+          /* 幻灯片容器强制设置 */
+          .slide-container {
+            width: ${targetWidth}px !important;
+            height: ${targetHeight}px !important;
+            min-width: ${targetWidth}px !important;
+            min-height: ${targetHeight}px !important;
+            max-width: ${targetWidth}px !important;
+            max-height: ${targetHeight}px !important;
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
             overflow: hidden !important;
-          \`;
+            transform: none !important;
+            transform-origin: top left !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border: none !important;
+            outline: none !important;
+            box-shadow: none !important;
+            z-index: 1 !important;
+          }
+          
+          /* 隐藏所有滚动条 */
+          html::-webkit-scrollbar,
+          body::-webkit-scrollbar,
+          *::-webkit-scrollbar {
+            display: none !important;
+            width: 0 !important;
+            height: 0 !important;
+          }
+          
+          /* Firefox */
+          html {
+            scrollbar-width: none !important;
+          }
+          
+          /* 禁用用户交互 */
+          * {
+            -webkit-user-select: none !important;
+            -moz-user-select: none !important;
+            -ms-user-select: none !important;
+            user-select: none !important;
+            -webkit-user-drag: none !important;
+            -khtml-user-drag: none !important;
+            -moz-user-drag: none !important;
+            -o-user-drag: none !important;
+            user-drag: none !important;
+            pointer-events: none !important;
+          }
+          
+          /* 移除响应式样式 */
+          .browse-mode * {
+            display: none !important;
+          }
+        </style>`
+    );
+
+    // 注入截图专用JavaScript
+    const finalHtml = optimizedHtml.replace(
+      /<\/body>/i,
+      `
+        <script id="screenshot-finalizer">
+          // 截图模式最终设置
+          window.SCREENSHOT_EXACT_MODE = true;
+          window.PPT_TARGET_WIDTH = ${targetWidth};
+          window.PPT_TARGET_HEIGHT = ${targetHeight};
+          
+          // 立即执行尺寸强制设置
+          (function() {
+            const exactWidth = ${targetWidth};
+            const exactHeight = ${targetHeight};
+            
+            console.log('截图模式强制设置:', exactWidth + 'x' + exactHeight);
+            
+            // 强制设置根元素
+            const html = document.documentElement;
+            const body = document.body;
+            
+            html.style.cssText = \`
+              width: \${exactWidth}px !important;
+              height: \${exactHeight}px !important;
+              min-width: \${exactWidth}px !important;
+              min-height: \${exactHeight}px !important;
+              max-width: \${exactWidth}px !important;
+              max-height: \${exactHeight}px !important;
+              overflow: hidden !important;
+              margin: 0 !important;
+              padding: 0 !important;
+              position: fixed !important;
+              top: 0 !important;
+              left: 0 !important;
+              border: none !important;
+              outline: none !important;
+              transform: none !important;
+              transform-origin: top left !important;
+            \`;
+            
+            body.style.cssText = \`
+              width: \${exactWidth}px !important;
+              height: \${exactHeight}px !important;
+              min-width: \${exactWidth}px !important;
+              min-height: \${exactHeight}px !important;
+              max-width: \${exactWidth}px !important;
+              max-height: \${exactHeight}px !important;
+              overflow: hidden !important;
+              margin: 0 !important;
+              padding: 0 !important;
+              position: fixed !important;
+              top: 0 !important;
+              left: 0 !important;
+              border: none !important;
+              outline: none !important;
+              transform: none !important;
+              transform-origin: top left !important;
+            \`;
+            
+            // 设置容器
+            const container = document.querySelector('.slide-container');
+            if (container) {
+              container.style.cssText = \`
+                width: \${exactWidth}px !important;
+                height: \${exactHeight}px !important;
+                min-width: \${exactWidth}px !important;
+                min-height: \${exactHeight}px !important;
+                max-width: \${exactWidth}px !important;
+                max-height: \${exactHeight}px !important;
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                overflow: hidden !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: none !important;
+                outline: none !important;
+                transform: none !important;
+                box-shadow: none !important;
+                z-index: 1 !important;
+              \`;
+            }
+            
+            // 移除响应式类
+            html.classList.remove('browse-mode');
+            body.classList.remove('browse-mode');
+            
+            console.log('截图模式设置完成');
+          })();
           
-          console.log('Exact dimensions applied for screenshot');
+          // DOM加载完成后再次确认
+          document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM加载完成，最终确认尺寸设置');
+            
+            // 再次强制设置，确保完全生效
+            const html = document.documentElement;
+            const body = document.body;
+            const container = document.querySelector('.slide-container');
+            
+            [html, body, container].forEach(element => {
+              if (element) {
+                element.style.width = '${targetWidth}px';
+                element.style.height = '${targetHeight}px';
+                element.style.minWidth = '${targetWidth}px';
+                element.style.minHeight = '${targetHeight}px';
+                element.style.maxWidth = '${targetWidth}px';
+                element.style.maxHeight = '${targetHeight}px';
+                element.style.margin = '0';
+                element.style.padding = '0';
+                element.style.border = 'none';
+                element.style.outline = 'none';
+                element.style.overflow = 'hidden';
+                
+                if (element !== container) {
+                  element.style.position = 'fixed';
+                  element.style.top = '0';
+                  element.style.left = '0';
+                }
+              }
+            });
+            
+            // 最终验证
+            setTimeout(() => {
+              console.log('最终尺寸验证:', {
+                html: html.offsetWidth + 'x' + html.offsetHeight,
+                body: body.offsetWidth + 'x' + body.offsetHeight,
+                container: container ? container.offsetWidth + 'x' + container.offsetHeight : 'none',
+                target: '${targetWidth}x${targetHeight}'
+              });
+            }, 100);
+          });
+        </script>
+      </body>`
+    );
+
+    console.log('HTML修改完成，已注入截图优化代码');
+    return finalHtml;
+  }
+
+  async captureScreenshot(htmlContent, width, height, options = {}) {
+    try {
+      await this.initBrowser();
+      
+      console.log(`开始截图, 目标尺寸: ${width}x${height}`);
+      
+      // 修改HTML内容以适应截图
+      const optimizedHtml = await this.modifyHtmlForScreenshot(htmlContent, width, height);
+      
+      // 创建新页面
+      const page = await this.browser.newPage();
+      
+      try {
+        // 设置精确的viewport尺寸
+        await page.setViewport({
+          width: width,
+          height: height,
+          deviceScaleFactor: options.deviceScaleFactor || 2, // 高清截图
         });
         
-        // 禁用所有可能的缩放和调整
-        window.addEventListener('resize', function(e) {
-          e.preventDefault();
-          e.stopPropagation();
+        // 设置页面内容
+        await page.setContent(optimizedHtml, {
+          waitUntil: ['load', 'domcontentloaded', 'networkidle0'],
+          timeout: 30000
         });
-      </script>`
-    );
-    
-    return modifiedHtml;
-  }
-  
-  // 生成错误提示图片 - 使用动态尺寸
-  generateErrorImage(errorMessage = '截图生成失败', dimensions = { width: 1280, height: 720 }) {
-    const { width, height } = dimensions;
-    
-    const canvas = `
-      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="${width}" height="${height}" fill="#f8f9fa"/>
-        <rect x="50" y="50" width="${width - 100}" height="${height - 100}" fill="white" stroke="#dee2e6" stroke-width="2"/>
-        <text x="${width / 2}" y="${height / 2 - 20}" text-anchor="middle" font-family="Arial" font-size="24" fill="#6c757d">
-          截图生成失败
-        </text>
-        <text x="${width / 2}" y="${height / 2 + 20}" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
-          ${errorMessage}
-        </text>
-      </svg>
-    `;
-    
-    return Buffer.from(canvas);
+        
+        // 等待页面完全渲染
+        await page.waitForTimeout(2000);
+        
+        // 执行最终的尺寸验证和调整
+        await page.evaluate((targetWidth, targetHeight) => {
+          const html = document.documentElement;
+          const body = document.body;
+          const container = document.querySelector('.slide-container');
+          
+          // 最终强制设置
+          [html, body].forEach(element => {
+            if (element) {
+              element.style.width = targetWidth + 'px';
+              element.style.height = targetHeight + 'px';
+              element.style.minWidth = targetWidth + 'px';
+              element.style.minHeight = targetHeight + 'px';
+              element.style.maxWidth = targetWidth + 'px';
+              element.style.maxHeight = targetHeight + 'px';
+              element.style.margin = '0';
+              element.style.padding = '0';
+              element.style.border = 'none';
+              element.style.outline = 'none';
+              element.style.overflow = 'hidden';
+              element.style.position = 'fixed';
+              element.style.top = '0';
+              element.style.left = '0';
+            }
+          });
+          
+          if (container) {
+            container.style.width = targetWidth + 'px';
+            container.style.height = targetHeight + 'px';
+            container.style.minWidth = targetWidth + 'px';
+            container.style.minHeight = targetHeight + 'px';
+            container.style.maxWidth = targetWidth + 'px';
+            container.style.maxHeight = targetHeight + 'px';
+            container.style.position = 'fixed';
+            container.style.top = '0';
+            container.style.left = '0';
+            container.style.margin = '0';
+            container.style.padding = '0';
+            container.style.border = 'none';
+            container.style.outline = 'none';
+            container.style.overflow = 'hidden';
+            container.style.transform = 'none';
+            container.style.boxShadow = 'none';
+          }
+          
+          console.log('最终页面尺寸确认:', {
+            html: html.offsetWidth + 'x' + html.offsetHeight,
+            body: body.offsetWidth + 'x' + body.offsetHeight,
+            container: container ? container.offsetWidth + 'x' + container.offsetHeight : 'none'
+          });
+        }, width, height);
+        
+        // 再次等待以确保所有更改生效
+        await page.waitForTimeout(1000);
+        
+        // 执行截图，使用精确的剪裁区域
+        const screenshot = await page.screenshot({
+          type: options.format || 'png',
+          quality: options.quality || 100,
+          clip: {
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+          },
+          omitBackground: false, // 包含背景
+          captureBeyondViewport: false, // 不截取视口外内容
+        });
+        
+        console.log(`截图完成, 生成了 ${screenshot.length} 字节的图片数据`);
+        return screenshot;
+        
+      } finally {
+        await page.close();
+      }
+      
+    } catch (error) {
+      console.error('截图失败:', error);
+      throw new Error(`截图失败: ${error.message}`);
+    }
   }
 }