perf:修改截图后展示

027xiguapi · Apr 30, 2024 · b3017bd · b3017bd
1 parent 86680c9
commit b3017bd
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 53 deletions.
diff --git a/README.de-DE.md b/README.de-DE.md
@@ -1,14 +1,14 @@
 <p align="center">
-  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120"  />
-  <h1>pear-rec</h1>
-  <p>
-    <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
-    <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
-    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
-    <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
-  </p>
+  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120">
+  <h1 align="center">pear-rec</h1>
+</p>
+<p align="center">
+<img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
+<img src="https://img.shields.io/badge/react-v18-blue" alt="react">
+<img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+<img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
+<img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
+<img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
 </p>
 
 ---

diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 <p align="center">
-  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120"  />
-  <h1>pear-rec</h1>
-  <p>
-    <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
-    <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
-    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
-    <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
-  </p>
+  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120">
+  <h1 align="center">pear-rec</h1>
+</p>
+<p align="center">
+<img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
+<img src="https://img.shields.io/badge/react-v18-blue" alt="react">
+<img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+<img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
+<img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
+<img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
 </p>
 
 ---
@@ -27,6 +27,8 @@
 
 ## 🧱 Frameworks
 
+<img src="https://027xiguapi.github.io/pear-rec/imgs/webav.png" />
+
 The cross-Platform of `pear-rec` is based on `electronjs`, and the front-end is based on `reactjs`. The functions of screenshot, screen recording, recording, recording (dynamic image) gif are a project based on `webrtc` and `webcodecs`.
 
 ## 🖖 Vue

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -1,14 +1,14 @@
 <p align="center">
-  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120"  />
-  <h1>pear-rec</h1>
-  <p>
-    <img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
-    <img src="https://img.shields.io/badge/react-v18-blue" alt="react">
-    <img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
-    <img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
-    <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
-    <img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
-  </p>
+  <img src="https://027xiguapi.github.io/pear-rec/logo.png"  height="120">
+  <h1 align="center">pear-rec</h1>
+</p>
+<p align="center">
+<img src="https://img.shields.io/github/stars/027xiguapi/pear-rec" alt="stars">
+<img src="https://img.shields.io/badge/react-v18-blue" alt="react">
+<img src="https://img.shields.io/badge/electron-v26-blue" alt="electron">
+<img src="https://img.shields.io/badge/nestjs-v3-blue" alt="nestjs">
+<img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" alt="typescript">
+<img src="https://img.shields.io/badge/-Vite-blue?logo=vite&logoColor=white" alt="vite">
 </p>
 
 ---
@@ -27,6 +27,8 @@
 
 ## 🧱 架构
 
+<img src="https://027xiguapi.github.io/pear-rec/imgs/webav.png" />
+
 > pear-rec(梨子 rec) 的跨平台是基于 `electronjs`,前端是基于 `reactjs`,截图、录屏、录音、录像、录制(动图)gif 等功能是基于 `webrtc` 和 `webcodecs` 的一个项目。
 
 ## 🖖 Vue

diff --git a/packages/desktop/electron/win/shotScreenWin.ts b/packages/desktop/electron/win/shotScreenWin.ts
@@ -5,8 +5,6 @@ import path from 'node:path';
 import * as utils from '../main/utils';
 
 let shotScreenWin: BrowserWindow | null = null;
-let savePath: string = '';
-let downloadSet: Set<string> = new Set();
 
 function createShotScreenWin(): BrowserWindow {
   shotScreenWin = new BrowserWindow({
@@ -121,7 +119,7 @@ async function downloadImg(file: any) {
           fileName: defaultPath,
           filePath: imagePath,
           bounds: file.bounds,
-          isClose: file.isClose,
+          isShow: isShow,
           isPin: isPin,
         });
         console.log(`${imagePath}:图片保存成功`);
@@ -130,33 +128,15 @@ async function downloadImg(file: any) {
   }
 }
 
-async function downloadURLShotScreenWin(downloadUrl: string, isShowDialog?: boolean) {
-  savePath = '';
-  isShowDialog && (savePath = await showOpenDialogShotScreenWin());
-  downloadSet.add(downloadUrl);
-  shotScreenWin?.webContents.downloadURL(downloadUrl);
-}
-
-async function showOpenDialogShotScreenWin() {
-  let res = await dialog.showOpenDialog({
-    properties: ['openDirectory'],
-  });
-
-  const savePath = res.filePaths[0] || '';
-
-  return savePath;
-}
-
 function copyImg(filePath: string) {
-  const image = nativeImage.createFromDataURL(filePath);
-  clipboard.writeImage(image);
+  const data = Buffer.from(`file://${encodeURI(filePath)}`, 'utf-8');
+  clipboard.writeBuffer('image/png', data);
 }
 
 export {
   closeShotScreenWin,
   copyImg,
   createShotScreenWin,
-  downloadURLShotScreenWin,
   downloadImg,
   hideShotScreenWin,
   maximizeShotScreenWin,

diff --git a/packages/docs/desktop/examples.md b/packages/docs/desktop/examples.md
@@ -23,6 +23,9 @@
 <center>
   <img src="/imgs/1700442414996.jpg" />
 </center>
+<center>
+  <img src="/imgs/webav.png" />
+</center>
 
 ## 首页
 

diff --git a/packages/docs/public/imgs/webav.png b/packages/docs/public/imgs/webav.png
diff --git a/packages/web/src/pages/shotScreen/index.tsx b/packages/web/src/pages/shotScreen/index.tsx
@@ -222,6 +222,8 @@ function ShotScreen() {
             width: bounds.width,
             height: bounds.height,
           });
+        } else {
+          file.isShow || window.electronAPI?.sendViOpenWin({ recordId: recordId });
         }
       }
     } catch (err) {