Tauri跨端笔记实战(4) - 如何实现系统级截图

Tauri跨端笔记系统级截图功能实现

最新推荐文章于 2025-09-10 22:25:05 发布

原创

最新推荐文章于 2025-09-10 22:25:05 发布 · 1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #tauri #前端 #rust #app

前言

Tauri 跨端笔记实战项目是基于 Notegen 开源项目，本系列深度解析如何运用Tauri框架开发跨平台AI笔记应用。涵盖核心技术选型、架构设计、典型场景开发及常见问题解决方案，通过代码级演示带您掌握集成AI能力的全流程开发技巧。

你可以通过本系列教程跟随我逐步搭建起一款跨端的笔记应用，也可以通过 NoteGen 源码来独立学习。

本文收录于《Tauri 开源日记》专栏，主要记录使用 Tauri 框架时的开发经验和避坑指南。

NoteGen 应用截图：
在这里插入图片描述

原理分析

本期主要讲解如何实现一个系统级别的截图功能，这是实现笔记应用中截图记录的功能的前提。整个截图的流程是，通过快捷键或点击按钮进行截图，框选区域实现部分截图，然后根据 OCR 识别进行文字提取，最后保存下文本和截图文件。

要实现屏幕上的截图，仅靠前端是无法实现的，还需要借助 rust 来实现。整个实现原理是，通过 rust 进行屏幕截图，并储存为一张临时图片，通知前端读取图片，在前端实现框选功能，首先需要创建一个新的窗口，然后框选后将选取的范围信息通知给 rust 进行裁切图片，随后保存。

屏幕截图

Rust 实现截图，我使用的是 XCap 库，它支持 Linux(X11,Wayland)、MacOS 与 Windows，所以移动端并不能使用它来实现。XCap 支持截图与视频录制，截图支持屏幕截图、窗口截图，这里我们先实现屏幕截图，窗口截图可以在后期实现更加优秀的截图体验。

在 src-tauri/src/ 下创建一个 screenshot.rs 文件，用来编写截图程序：

use tauri::{
   
   path::BaseDirectory, AppHandle, Manager};
use xcap::{
   
   image, Monitor};

#[allow(dead_code)]
#[tauri::command]
pub fn screenshot(app: AppHandle) -> String {
   
   
    let monitors = Monitor::all().unwrap();
    let mut path    = String::new();
    for monitor in monitors {
   
   
        let current_monitor = app.get_webview_window("main")