添加截屏时页面显示效果

ksdhyPro · Sep 18, 2024 · 4ea6f00 · 4ea6f00
1 parent c33d10c
commit 4ea6f00
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 24 deletions.
diff --git a/main.js b/main.js
@@ -133,13 +133,13 @@ app.whenReady().then(async () => {
 
   // 全局注册截图快捷键
   findShortcut(shortcutDict.crop).then(async (cropKey) => {
-    let png = await screenShot();
     setShortcutHandler(shortcutDict.crop, cropKey, async () => {
+      let png = await screenShot();
       fullScreenWindow.webContents.send("send-image", png);
       // 留给渲染进城处理画布的时间
       setTimeout(() => {
         fullScreenWindow.show();
-      }, 60);
+      }, 100);
     });
   });
 

diff --git a/main/windows/fullScreen/index.js b/main/windows/fullScreen/index.js
@@ -19,8 +19,8 @@ async function createFullScreenWindow() {
       },
     });
     // win.webContents.setFrameRate(60);
-    await win.loadURL("http://localhost:8888");
-    // await win.loadFile(getProjectRoot() + "/view/index.html");
+    // await win.loadURL("http://localhost:8888");
+    await win.loadFile(getProjectRoot() + "/view/index.html");
     // win.webContents.openDevTools();
     resolve(win);
   });

diff --git a/readme.md b/readme.md
@@ -14,12 +14,17 @@
 - 问题原因：
   > 每次动态注册快捷键时都读取了本地存储，由于是同步读取，会阻塞主进程
 - 优化方案：
-  > 变更为添加一层内存缓存，应用初始化读取一次，以后每次在内存中找，再通过设置页面设置时，同步更新缓存和本地存储
 
-配置
+  > 变更为添加一层内存缓存，应用初始化读取一次，以后每次在内存中找，再通过设置页面设置时，同步更新缓存和本地存储
 
-```js
- webPreferences: {
-  backgroundThrottling: false, // 浏览器不可见时，仍然执行定时任务等
-}
-```
+- 问题复现：
+  > 截屏后画布清空延迟
+- 问题原因：
+  > 浏览器存在节能优化，在页面不可见时，requestAnimationFrame 会停止运行，canvas 也会停止绘制
+- 优化方案：
+  窗口添加以下配置
+  ```js
+  webPreferences: {
+    backgroundThrottling: false,
+  }
+  ```
diff --git a/test.png b/test.png
diff --git a/view/assets/index-DPZYCE7o.js → view/assets/index-CIBo0GCs.js b/view/assets/index-DPZYCE7o.js → view/assets/index-CIBo0GCs.js
diff --git a/view/assets/index-DPZYCE7o.js.map → view/assets/index-CIBo0GCs.js.map b/view/assets/index-DPZYCE7o.js.map → view/assets/index-CIBo0GCs.js.map
diff --git a/view/index.html b/view/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="./favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
-    <script type="module" crossorigin src="./assets/index-DPZYCE7o.js"></script>
+    <script type="module" crossorigin src="./assets/index-CIBo0GCs.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-C8ZRs3_p.css">
   </head>
   <body>