Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -3,10 +3,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({
         headless: 'new',
@@ -45,32 +50,17 @@ class ScreenshotService {
       const page = await browser.newPage();
       console.log('New page created');
       
-      // PPT标准尺寸 (4:3 比例)
-      const pptWidth = 1000;
-      const pptHeight = 750;
-      
-      // 设置页面视窗大小，添加足够的边距以避免裁切问题
+      // 设置页面视窗大小为PPT的精确尺寸
       await page.setViewport({ 
-        width: pptWidth + 100, // 添加边距
-        height: pptHeight + 100, // 添加边距
+        width: pptDimensions.width,
+        height: pptDimensions.height,
         deviceScaleFactor: 2 // 高分辨率
       });
       
-      console.log('Viewport set');
-      
-      // 修改HTML内容，确保PPT容器居中且尺寸精确
-      const modifiedHtmlContent = htmlContent.replace(
-        '<div class="slide-container"',
-        `<div class="slide-container" style="width: ${pptWidth}px; height: ${pptHeight}px; position: absolute; left: 50px; top: 50px; margin: 0; transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"`
-      ).replace(
-        '.viewport-container {',
-        `.viewport-container {
-          position: relative;
-          width: ${pptWidth + 100}px;
-          height: ${pptHeight + 100}px;
-          background-color: transparent;
-          display: block;`
-      );
+      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, { 
@@ -81,19 +71,68 @@ class ScreenshotService {
       console.log('HTML content set');
       
       // 等待渲染完成
-      await page.waitForTimeout(1000);
+      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('Taking screenshot...');
+      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);
+      }
       
-      // 精确截取PPT区域
+      console.log('Taking precise screenshot...');
+      
+      // 截取精确的PPT内容区域，不包含任何白边
       const screenshot = await page.screenshot({
         type: 'jpeg',
-        quality: 90, // 提高质量
+        quality: 95,
+        // 使用clip精确截取PPT内容区域
         clip: {
-          x: 50,
-          y: 50,
-          width: pptWidth,
-          height: pptHeight
+          x: 0,
+          y: 0,
+          width: pptDimensions.width,
+          height: pptDimensions.height
         },
         timeout: 10000
       });
@@ -105,7 +144,7 @@ class ScreenshotService {
       console.error('Screenshot generation error:', error);
       
       // 返回一个错误图片而不是抛出��常
-      return this.generateErrorImage(error.message);
+      return this.generateErrorImage(error.message, pptDimensions);
     } finally {
       if (browser) {
         try {
@@ -118,19 +157,192 @@ class ScreenshotService {
     }
   }
   
-  // 生成错误提示图片 - 也使用精确的PPT尺寸
-  generateErrorImage(errorMessage = '截图生成失败') {
-    const pptWidth = 1000;
-    const pptHeight = 750;
+  // 从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 };
+    }
+    
+    // 默认尺寸 - 使用标准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>`
+    );
+    
+    // 移除所有可能影响尺寸的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;
+            \`;
+          }
+          
+          // 设置body和html精确尺寸
+          document.body.style.cssText = \`
+            width: ${width}px !important;
+            height: ${height}px !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            overflow: hidden !important;
+            position: absolute !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;
+            overflow: hidden !important;
+          \`;
+          
+          console.log('Exact dimensions applied for screenshot');
+        });
+        
+        // 禁用所有可能的缩放和调整
+        window.addEventListener('resize', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      </script>`
+    );
+    
+    return modifiedHtml;
+  }
+  
+  // 生成错误提示图片 - 使用动态尺寸
+  generateErrorImage(errorMessage = '截图生成失败', dimensions = { width: 1280, height: 720 }) {
+    const { width, height } = dimensions;
     
     const canvas = `
-      <svg width="${pptWidth}" height="${pptHeight}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="${pptWidth}" height="${pptHeight}" fill="#f8f9fa"/>
-        <rect x="50" y="50" width="${pptWidth - 100}" height="${pptHeight - 100}" fill="white" stroke="#dee2e6" stroke-width="2"/>
-        <text x="${pptWidth / 2}" y="${pptHeight / 2 - 20}" text-anchor="middle" font-family="Arial" font-size="24" fill="#6c757d">
+      <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="${pptWidth / 2}" y="${pptHeight / 2 + 20}" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
+        <text x="${width / 2}" y="${height / 2 + 20}" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
           ${errorMessage}
         </text>
       </svg>