Spaces:

CatPtain
/

web_ppt

Running

App Files Files Community

CatPtain commited on Jun 14

Commit

d1278b8

verified ·

1 Parent(s): 21da54e

Upload screenshotService.js

Browse files

Files changed (1) hide show

backend/src/services/screenshotService.js +208 -148

backend/src/services/screenshotService.js CHANGED Viewed

@@ -35,7 +35,10 @@ class ScreenshotService {
           '--disable-domain-reliability',
           '--disable-component-extensions-with-background-pages',
           '--force-device-scale-factor=1',
-          '--enable-precise-memory-info'
         ]
       });
       console.log('Puppeteer浏览器初始化完成');
@@ -51,20 +54,55 @@ class ScreenshotService {
     }
   }
-  async modifyHtmlForScreenshot(htmlContent, targetWidth, targetHeight) {
-    console.log(`开始修改HTML for截图, 目标尺寸: ${targetWidth}x${targetHeight}`);
-    // 创建完全针对截图优化的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;
@@ -73,7 +111,6 @@ class ScreenshotService {
             outline: none !important;
           }
-          /* 根元素强制设置 */
           html {
             width: ${targetWidth}px !important;
             height: ${targetHeight}px !important;
@@ -87,13 +124,10 @@ class ScreenshotService {
             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;
@@ -107,13 +141,10 @@ class ScreenshotService {
             left: 0 !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;
@@ -129,8 +160,6 @@ class ScreenshotService {
             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;
           }
@@ -144,7 +173,6 @@ class ScreenshotService {
             height: 0 !important;
           }
-          /* Firefox */
           html {
             scrollbar-width: none !important;
           }
@@ -163,82 +191,93 @@ class ScreenshotService {
             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;
@@ -253,23 +292,17 @@ class ScreenshotService {
               \`;
             }
-            // 移除响应式类
-            html.classList.remove('browse-mode');
-            body.classList.remove('browse-mode');
-            console.log('截图模式设置完成');
           })();
           // 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';
@@ -282,41 +315,54 @@ class ScreenshotService {
                 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();
@@ -324,8 +370,8 @@ class ScreenshotService {
       try {
         // 设置精确的viewport尺寸
         await page.setViewport({
-          width: width,
-          height: height,
           deviceScaleFactor: options.deviceScaleFactor || 2, // 高清截图
         });
@@ -338,76 +384,84 @@ class ScreenshotService {
         // 等待页面完全渲染
         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 {
@@ -415,10 +469,16 @@ class ScreenshotService {
       }
     } catch (error) {
-      console.error('截图失败:', error);
-      throw new Error(`截图失败: ${error.message}`);
     }
   }
 }
 export default new ScreenshotService();

           '--disable-domain-reliability',
           '--disable-component-extensions-with-background-pages',
           '--force-device-scale-factor=1',
+          '--enable-precise-memory-info',
+          '--disable-features=VizDisplayCompositor',
+          '--run-all-compositor-stages-before-draw',
+          '--disable-new-content-rendering-timeout'
         ]
       });
       console.log('Puppeteer浏览器初始化完成');
     }
   }
+  // 从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 {
+          width: parseInt(dimensionMatch[1]),
+          height: parseInt(dimensionMatch[2])
+        };
+      }
+      // 从viewport meta标签中提取
+      const viewportMatch = htmlContent.match(/width=(\d+),\s*height=(\d+)/);
+      if (viewportMatch) {
+        return {
+          width: parseInt(viewportMatch[1]),
+          height: parseInt(viewportMatch[2])
+        };
+      }
+      // 从CSS中提取
+      const cssMatch = htmlContent.match(/width:\s*(\d+)px.*height:\s*(\d+)px/);
+      if (cssMatch) {
+        return {
+          width: parseInt(cssMatch[1]),
+          height: parseInt(cssMatch[2])
+        };
+      }
+      // 默认尺寸
+      return { width: 960, height: 720 };
+    } catch (error) {
+      console.warn('提取PPT尺寸失败，使用默认尺寸:', error.message);
+      return { width: 960, height: 720 };
+    }
+  }
+  // 优化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;
             outline: none !important;
           }
           html {
             width: ${targetWidth}px !important;
             height: ${targetHeight}px !important;
             left: 0 !important;
             margin: 0 !important;
             padding: 0 !important;
             transform: none !important;
             transform-origin: top left !important;
           }
           body {
             width: ${targetWidth}px !important;
             height: ${targetHeight}px !important;
             left: 0 !important;
             margin: 0 !important;
             padding: 0 !important;
             transform: none !important;
             transform-origin: top left !important;
           }
           .slide-container {
             width: ${targetWidth}px !important;
             height: ${targetHeight}px !important;
             transform-origin: top left !important;
             margin: 0 !important;
             padding: 0 !important;
             box-shadow: none !important;
             z-index: 1 !important;
           }
             height: 0 !important;
           }
           html {
             scrollbar-width: none !important;
           }
             pointer-events: none !important;
           }
+          /* 强制移除响应式样式 */
+          .browse-mode,
+          .browse-mode html,
+          .browse-mode body,
+          .browse-mode .slide-container {
+            display: block !important;
+            position: fixed !important;
+            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;
+            transform: none !important;
+            background-color: transparent !important;
+            top: 0 !important;
+            left: 0 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            box-shadow: none !important;
           }
         </style>`
     );
+    // 在</body>前插入截图专用JavaScript
     const finalHtml = optimizedHtml.replace(
+      /(<\/body>)/i,
       `
+        <script id="screenshot-precision-script">
+          // 截图模式强制设置
           window.SCREENSHOT_EXACT_MODE = true;
           window.PPT_TARGET_WIDTH = ${targetWidth};
           window.PPT_TARGET_HEIGHT = ${targetHeight};
+          // 立即执行强制设置，确保尺寸精确
           (function() {
+            const targetW = ${targetWidth};
+            const targetH = ${targetHeight};
+            console.log('截图模式精确设置开始:', targetW + 'x' + targetH);
             const html = document.documentElement;
             const body = document.body;
+            // 强制设置根元素
+            const setElementSize = (element, width, height) => {
+              if (!element) return;
+              element.style.cssText = \`
+                width: \${width}px !important;
+                height: \${height}px !important;
+                min-width: \${width}px !important;
+                min-height: \${height}px !important;
+                max-width: \${width}px !important;
+                max-height: \${height}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;
+                box-sizing: border-box !important;
+              \`;
+            };
+            // 设置HTML和Body
+            setElementSize(html, targetW, targetH);
+            setElementSize(body, targetW, targetH);
+            // 移除可能的���应式类
+            html.classList.remove('browse-mode');
+            body.classList.remove('browse-mode');
             // 设置容器
             const container = document.querySelector('.slide-container');
             if (container) {
               container.style.cssText = \`
+                width: \${targetW}px !important;
+                height: \${targetH}px !important;
+                min-width: \${targetW}px !important;
+                min-height: \${targetH}px !important;
+                max-width: \${targetW}px !important;
+                max-height: \${targetH}px !important;
                 position: fixed !important;
                 top: 0 !important;
                 left: 0 !important;
               \`;
             }
+            console.log('截图模式精确设置完成');
           })();
           // DOM加载完成后再次确认
           document.addEventListener('DOMContentLoaded', function() {
             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.border = 'none';
                 element.style.outline = 'none';
                 element.style.overflow = 'hidden';
+                element.style.position = 'fixed';
+                element.style.top = '0';
+                element.style.left = '0';
+                element.style.transform = 'none';
               }
             });
+            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('DOM加载后的最终尺寸确认完成');
           });
         </script>
+      $1`
     );
+    console.log('HTML优化完成，已注入精确尺寸控制代码');
     return finalHtml;
   }
+  async generateScreenshot(htmlContent, options = {}) {
     try {
       await this.initBrowser();
+      console.log('开始生成截图...');
+      // 从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);
       // 创建新页面
       const page = await this.browser.newPage();
       try {
         // 设置精确的viewport尺寸
         await page.setViewport({
+          width: dimensions.width,
+          height: dimensions.height,
           deviceScaleFactor: options.deviceScaleFactor || 2, // 高清截图
         });
         // 等待页面完全渲染
         await page.waitForTimeout(2000);
+        // 执行最终的尺寸验证和强制设置
         await page.evaluate((targetWidth, targetHeight) => {
           const html = document.documentElement;
           const body = document.body;
           const container = document.querySelector('.slide-container');
+          // 最终强制设置，确保精确尺寸
+          const forceSize = (element, width, height) => {
+            if (!element) return;
+            element.style.width = width + 'px';
+            element.style.height = height + 'px';
+            element.style.minWidth = width + 'px';
+            element.style.minHeight = height + 'px';
+            element.style.maxWidth = width + 'px';
+            element.style.maxHeight = height + 'px';
+            element.style.margin = '0';
+            element.style.padding = '0';
+            element.style.border = 'none';
+            element.style.outline = 'none';
+            element.style.overflow = 'hidden';
+            element.style.transform = 'none';
+            if (element !== container) {
               element.style.position = 'fixed';
               element.style.top = '0';
               element.style.left = '0';
             }
+          };
+          forceSize(html, targetWidth, targetHeight);
+          forceSize(body, targetWidth, targetHeight);
           if (container) {
+            forceSize(container, targetWidth, targetHeight);
             container.style.position = 'fixed';
             container.style.top = '0';
             container.style.left = '0';
             container.style.boxShadow = 'none';
+            container.style.zIndex = '1';
           }
+          // 验证尺寸设置结果
+          const verification = {
             html: html.offsetWidth + 'x' + html.offsetHeight,
             body: body.offsetWidth + 'x' + body.offsetHeight,
+            container: container ? container.offsetWidth + 'x' + container.offsetHeight : 'none',
+            target: targetWidth + 'x' + targetHeight
+          };
+          console.log('最终尺寸验证:', verification);
+          // 如果尺寸不匹配，记录警告
+          if (html.offsetWidth !== targetWidth || html.offsetHeight !== targetHeight) {
+            console.warn('HTML尺寸不匹配目标尺寸！');
+          }
+          return verification;
+        }, dimensions.width, dimensions.height);
         // 再次等待以确保所有更改生效
         await page.waitForTimeout(1000);
         // 执行截图，使用精确的剪裁区域
         const screenshot = await page.screenshot({
+          type: options.format || 'jpeg',
+          quality: options.quality || 95,
           clip: {
             x: 0,
             y: 0,
+            width: dimensions.width,
+            height: dimensions.height
           },
           omitBackground: false, // 包含背景
           captureBeyondViewport: false, // 不截取视口外内容
         });
+        console.log(`截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
         return screenshot;
       } finally {
       }
     } catch (error) {
+      console.error('截图生成失败:', error);
+      throw new Error(`截图生成失败: ${error.message}`);
     }
   }
+  // 兼容旧方法名
+  async captureScreenshot(htmlContent, width, height, options = {}) {
+    console.log('使用兼容方法captureScreenshot，建议使用generateScreenshot');
+    return this.generateScreenshot(htmlContent, options);
+  }
 }
 export default new ScreenshotService();