Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -92,7 +92,6 @@ class ScreenshotService {
           
           // 内存和性能优化
           '--disable-dev-shm-usage',
-          '--disable-gpu',
           '--disable-extensions',
           '--disable-background-timer-throttling',
           '--disable-backgrounding-occluded-windows',
@@ -100,17 +99,25 @@ class ScreenshotService {
           '--no-first-run',
           '--no-default-browser-check',
           '--disable-default-apps',
-          '--disable-features=TranslateUI,VizDisplayCompositor',
+          '--disable-features=TranslateUI',
           '--disable-ipc-flooding-protection',
           
           // 容器环境优化 - 禁用D-Bus和系统服务
           '--disable-dbus',
-          '--disable-software-rasterizer',
           '--disable-field-trial-config',
           '--disable-translate',
           '--disable-web-security',
           '--allow-running-insecure-content',
           
+          // SVG和字体渲染优化
+          '--font-render-hinting=none', // 修复字体渲染不一致问题
+          '--enable-font-antialiasing', // 启用字体抗锯齿
+          '--force-color-profile=srgb', // 强制使用sRGB颜色配置
+          '--disable-software-rasterizer', // 禁用软件光栅化，使用硬件加速
+          '--enable-gpu-rasterization', // 启用GPU光栅化以改善SVG渲染
+          '--enable-oop-rasterization', // 启用进程外光栅化
+          '--disable-features=VizDisplayCompositor', // 禁用可能影响渲染的功能
+          
           // 内存限制优化
           '--js-flags=--max-old-space-size=512', // 降低JS内存使用
           '--memory-pressure-off',
@@ -120,9 +127,6 @@ class ScreenshotService {
           '--disable-background-networking',
           '--disable-background-mode',
           
-          // 字体渲染优化
-          '--font-render-hinting=none',
-          
           // 禁用不必要的功能
           '--disable-breakpad',
           '--disable-component-update',
@@ -242,17 +246,48 @@ class ScreenshotService {
       // 构建Google字体URL
       const googleFontsUrl = `https://fonts.googleapis.com/css2?family=${this.googleFonts.join('&family=')}&display=swap`;
       
-      // 注入字体CSS
+      // 注入字体CSS（改进版）
       await page.evaluateOnNewDocument((fontsUrl) => {
         // 创建link元素加载Google字体
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = fontsUrl;
+        link.crossOrigin = 'anonymous'; // 添加跨域支持
         
-        // 当文档创建时添加到head
-        document.addEventListener('DOMContentLoaded', () => {
-          document.head.appendChild(link);
-        });
+        // 立即添加到head，不等待DOMContentLoaded
+        const addFontLink = () => {
+          if (document.head) {
+            document.head.appendChild(link);
+            console.log('Google Fonts injected successfully');
+          } else {
+            // 如果head还不存在，等待一下再试
+            setTimeout(addFontLink, 10);
+          }
+        };
+        
+        // 立即尝试添加
+        addFontLink();
+        
+        // 同时添加备用字体CSS
+        const style = document.createElement('style');
+        style.textContent = `
+          * {
+            font-family: 'Noto Sans SC', 'Microsoft YaHei', 'SimHei', sans-serif !important;
+          }
+          svg text {
+            font-family: 'Noto Sans SC', 'Microsoft YaHei', 'SimHei', sans-serif !important;
+          }
+        `;
+        
+        const addBackupStyle = () => {
+          if (document.head) {
+            document.head.appendChild(style);
+          } else {
+            setTimeout(addBackupStyle, 10);
+          }
+        };
+        
+        addBackupStyle();
       }, googleFontsUrl);
     } catch (error) {
       console.warn('⚠️ Failed to inject Google Fonts:', error.message);
@@ -698,7 +733,7 @@ class ScreenshotService {
         return document.fonts ? document.fonts.ready : Promise.resolve();
       });
 
-      // 等待SVG元素完全加载和渲染
+      // 等待SVG元素完全加载和渲染（改进版）
       await page.evaluate(() => {
         return new Promise(resolve => {
           const svgs = document.querySelectorAll('svg');
@@ -707,26 +742,47 @@ class ScreenshotService {
             return;
           }
           
-          let loadedCount = 0;
-          const checkComplete = () => {
-            loadedCount++;
-            if (loadedCount === svgs.length) resolve();
+          console.log(`Found ${svgs.length} SVG elements, waiting for rendering...`);
+          
+          // 检查SVG是否已渲染的函数
+          const checkSVGRendered = (svg) => {
+            try {
+              // 检查SVG的bounding box是否有效
+              const bbox = svg.getBBox();
+              return bbox && bbox.width > 0 && bbox.height > 0;
+            } catch (e) {
+              // 如果getBBox失败，检查SVG是否有子元素
+              return svg.children.length > 0;
+            }
           };
           
-          svgs.forEach(svg => {
-            if (svg.complete || svg.readyState === 'complete') {
-              checkComplete();
+          // 等待所有SVG渲染完成
+          const waitForSVGs = () => {
+            let allRendered = true;
+            
+            svgs.forEach(svg => {
+              if (!checkSVGRendered(svg)) {
+                allRendered = false;
+              }
+            });
+            
+            if (allRendered) {
+              console.log('All SVG elements rendered successfully');
+              resolve();
             } else {
-              svg.addEventListener('load', checkComplete);
-              svg.addEventListener('error', checkComplete); // 处理加载错误
+              // 继续等待
+              setTimeout(waitForSVGs, 100);
             }
-          });
+          };
           
-          // 如果所有SVG都已完成，立即resolve
-          if (loadedCount === svgs.length) resolve();
+          // 开始检查
+          waitForSVGs();
           
-          // 超时保护，确保不会无限等待
-          setTimeout(resolve, 3000);
+          // 超时保护，最多等待5秒
+          setTimeout(() => {
+            console.log('SVG rendering timeout, proceeding anyway');
+            resolve();
+          }, 5000);
         });
       });