Rust叠图软件分享

功能#

1. 本地上传图片 — 支持 png / jpg / jpeg / webp / svg / gif / bmp / ico / tiff。
2. 转黑白 — 上传后立即转为灰度图（Luma8）。
3. 操作板 — 拖拽文件到操作板导入（导入后需要对操作板进行操作才会显示最新导入的图片）；图层有优先级，一次只选一个图层；选中后可拖动，也可直接输入 X/Y 坐标；可上移/下移/删除。
4. 叠加模式
   • 普通：同一像素位置，取各图层中更偏灰黑（更暗）的像素颜色。
   • 严肃：先把所有非 (0,0,0) 像素转成 (255,255,255)，再叠加（任一图层在该处有非黑像素即为白）。
5. 导出 — PNG / JPEG / WebP / BMP / TIFF / GIF（按所选扩展名自动选择编码器）。

目录结构#

1
Overlay/
2
├─ src/                  # 前端（Vue）
3
│  ├─ App.vue            # 布局 + 全局拖放导入
4
│  ├─ store.js           # 状态 + 与后端命令交互
5
│  └─ components/
6
│     ├─ LayerBoard.vue  # 操作板（canvas：绘制/选中/拖动图层）
7
│     └─ LayerPanel.vue  # 图层列表 / 坐标输入 / 模式 / 导出
8
├─ src-tauri/            # 后端（Rust + Tauri）
9
│  ├─ src/
10
│  │  ├─ lib.rs          # 所有 Tauri 命令 + 叠加合成逻辑
11
│  │  └─ main.rs
12
│  ├─ examples/gen_icon.rs # 图标生成脚本
13
│  ├─ tauri.conf.json
14
│  ├─ capabilities/default.json
15
│  └─ Cargo.toml
16
├─ index.html / package.json / vite.config.js
17
└─ README.md / LICENSE   # MIT

环境准备#

1. Rust：安装 rustup，装 stable x86_64-pc-windows-msvc 工具链。
2. Node.js：安装 ≥ 18（推荐 20+）。在项目根目录执行 npm install。
3. WebView2 Runtime：Win10/11 通常已内置；如缺失请到微软官网安装。

构建与运行#

1
npm run tauri build
2
# 直接构建可独立运行、不带安装器的可执行文件：
3
# cd src-tauri && cargo build --release
4
# 成品在 src-tauri/target/release/overlay.exe（内置前端，双击即用，无需 dev server）
5

6
# 开发模式（Vite 热更新 + Tauri 窗口）
7
npm run tauri dev

重要（关于 “localhost 拒绝连接”）：src-tauri/Cargo.toml 里已把 custom-protocol 设为默认 feature。它让发布版把 Vue 前端内嵌进 exe， 通过 tauri:// 协议加载，而不是访问 devUrl。所以：

• 用 npm run tauri build 或 cargo build --release 产出的 exe 独立可跑， 不再需要 localhost 上开一个服务。
• 只有 npm run tauri dev（开发模式）才需要本机 http://localhost:1420 的 Vite server；如果 dev 窗口出现 “拒绝连接”，说明该 server 没起来 （重新执行 npm run tauri dev 即可）。
• 注意：因为 custom-protocol 默认开启，tauri dev 加载的是最后一次 dist 构建的快照，不做前端热更新；要更新前端请先 npm run build。

叠加逻辑核心（src-tauri/src/lib.rs）#

1
// serious=false（普通）：取各图层该像素中最暗的一个
2
// serious=true （严肃）：任一图层该像素非黑 -> 白。
3
fn overlay(layers, width, height, serious) -> GrayImage {
4
// 逐像素：normal 用 filter_map(...).min()，serious 用 any(is_some_and(|v| v>0))
5
}