fix: Screenshot Size Error on Wayland

#278 #195

Author: Pylogmon

src-tauri/src/utils.rs

@@ -27,13 +27,14 @@ pub fn get_translate_text(state: tauri::State<StringWrapper>) -> String {
 }
 
 #[tauri::command]
-pub fn screenshot(x: i32, y: i32) {
+pub fn screenshot(x: i32, y: i32) -> u32 {
     use crate::APP;
     use dirs::cache_dir;
     use screenshots::Screen;
     use std::fs;
 
     let screens = Screen::all().unwrap();
+    let mut width = 0u32;
     for screen in screens {
         let info = screen.display_info;
         if info.x == x && info.y == y {
@@ -49,9 +50,11 @@ pub fn screenshot(x: i32, y: i32) {
             let image = screen.capture().unwrap();
             let buffer = image.to_png().unwrap();
             fs::write(app_cache_dir_path, buffer).unwrap();
+            width = image.width();
             break;
         }
     }
+    width
 }
 
 #[tauri::command]

src/windows/Screenshot/index.jsx

@@ -13,12 +13,14 @@ export default function Screenshot() {
     const [mouseDownY, setMouseDownY] = useState(0);
     const [mouseMoveX, setMouseMoveX] = useState(0);
     const [mouseMoveY, setMouseMoveY] = useState(0);
+    const [imgWidth, setImgWidth] = useState(0);
 
     useEffect(() => {
         currentMonitor().then((monitor) => {
-            const size = monitor.size;
             const position = monitor.position;
-            invoke('screenshot', { x: position.x, y: position.y }).then((_) => {
+            invoke('screenshot', { x: position.x, y: position.y }).then((width) => {
+                //真实图片宽度
+                setImgWidth(width);
                 appCacheDir().then((appCacheDirPath) => {
                     join(appCacheDirPath, 'pot_screenshot.png').then((filePath) => {
                         setImgurl(convertFileSrc(filePath));
@@ -100,8 +102,7 @@ export default function Screenshot() {
                     appWindow.hide();
                     setIsDown(false);
                     setIsMoved(false);
-                    const monitor = await currentMonitor();
-                    const dpi = monitor.size.width / screen.width;
+                    const dpi = imgWidth / screen.width;
                     // const dpi = monitor.scaleFactor; //这是系统的dpi，不一定是网页内容的dpi
                     const left = Math.floor(Math.min(mouseDownX, e.clientX) * dpi);
                     const top = Math.floor(Math.min(mouseDownY, e.clientY) * dpi);
@@ -113,7 +114,6 @@ export default function Screenshot() {
                     } else {
                         await emit('translate');
                     }
-
                     await appWindow.close();
                 }}
             />