Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -9,7 +9,7 @@ class ScreenshotService {
       
       // 更适合容器环境的Puppeteer配置
       browser = await puppeteer.launch({
-        headless: 'new', // 使用新的headless模式
+        headless: 'new',
         args: [
           '--no-sandbox',
           '--disable-setuid-sandbox',
@@ -36,7 +36,7 @@ class ScreenshotService {
           '--memory-pressure-off',
           '--max_old_space_size=4096'
         ],
-        timeout: 30000, // 30秒超时
+        timeout: 30000,
         protocolTimeout: 30000
       });
       
@@ -45,33 +45,56 @@ class ScreenshotService {
       const page = await browser.newPage();
       console.log('New page created');
       
-      // 设置页面视窗大小，匹配PPT的4:3比例
+      // PPT标准尺寸 (4:3 比例)
+      const pptWidth = 1000;
+      const pptHeight = 750;
+      
+      // 设置页面视窗大小，添加足够的边距以避免裁切问题
       await page.setViewport({ 
-        width: 1000, 
-        height: 750,
-        deviceScaleFactor: 1 // 降低分辨率减少内存使用
+        width: pptWidth + 100, // 添加边距
+        height: pptHeight + 100, // 添加边距
+        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;`
+      );
+      
       // 设置HTML内容
-      await page.setContent(htmlContent, { 
-        waitUntil: 'domcontentloaded', // 改为更快的加载策略
+      await page.setContent(modifiedHtmlContent, { 
+        waitUntil: 'domcontentloaded',
         timeout: 10000 
       });
       
       console.log('HTML content set');
       
-      // 等待渲染完成（减少等待时间）
-      await page.waitForTimeout(500);
+      // 等待渲染完成
+      await page.waitForTimeout(1000);
       
       console.log('Taking screenshot...');
       
-      // 截图
+      // 精确截取PPT区域
       const screenshot = await page.screenshot({
         type: 'jpeg',
-        quality: 80, // 降低质量减少文件大小
-        fullPage: false,
+        quality: 90, // 提高质量
+        clip: {
+          x: 50,
+          y: 50,
+          width: pptWidth,
+          height: pptHeight
+        },
         timeout: 10000
       });
       
@@ -95,23 +118,24 @@ class ScreenshotService {
     }
   }
   
-  // 生成错误提示图片
+  // 生成错误提示图片 - 也使用精确的PPT尺寸
   generateErrorImage(errorMessage = '截图生成失败') {
-    // 创建一个简单的错误图片的base64数据
+    const pptWidth = 1000;
+    const pptHeight = 750;
+    
     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">
+      <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">
           截图生成失败
         </text>
-        <text x="500" y="400" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
+        <text x="${pptWidth / 2}" y="${pptHeight / 2 + 20}" text-anchor="middle" font-family="Arial" font-size="16" fill="#868e96">
           ${errorMessage}
         </text>
       </svg>
     `;
     
-    // 将SVG转换为Buffer（简化版本）
     return Buffer.from(canvas);
   }
 }