# choosePhoto

**Repository Path**: jerrycyl/chhoosephoto

## Basic Information

- **Project Name**: choosePhoto
- **Description**: # 📸 照片选择工具

一个专为摄影师设计的快速高效的 CR3 原始文件清理工具，采用模块化架构设计，帮助您轻松管理大量照片文件。

## 📖 背景

作为业余摄影师，我经常使用高速连拍功能，但面对大量照片时选片变得非常繁琐。尝试了多种软件后，我决定自己开发一个工具，满足我的快速初始选片需求。
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-06
- **Last Updated**: 2025-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 专业图片查看器 (Electron + Vue3 + Ant Design Vue)

一个功能强大的专业图片查看器，基于 Electron + Vue3 + Ant Design Vue 开发，支持图片浏览、批量处理、曲线调整等专业功能。

## 预览图

![预览图](PixPin_2025-12-14_20-29-08.png)

## 功能特性

- 📁 **目录扫描**：快速扫描指定目录下的所有图片文件
- 🖼️ **图片查看**：支持缩放、旋转、翻转、适应窗口等操作
- ⚡ **虚拟滚动**：高效渲染大量图片，支持上千张图片流畅浏览
- 🎨 **修图功能**：
  - 边框添加：支持自定义边框宽度、颜色和圆角
  - 水印添加：支持文字水印，自定义位置、大小和透明度
  - 背景虚化：支持高斯模糊背景，自定义模糊程度
  - 曲线调整：支持 RGB/红/绿/蓝通道曲线调整
- 🔄 **Before/After 对比**：实时对比修图前后效果
- 💾 **批量处理**：支持批量应用修图参数
- 📱 **响应式设计**：适配不同屏幕尺寸

## 技术栈

- **前端框架**：Vue 3.3.4
- **UI 组件库**：Ant Design Vue 4.0.0
- **状态管理**：Pinia 2.1.7
- **构建工具**：Vite 5.0.0
- **桌面应用框架**：Electron 28.0.0
- **图像处理**：Canvas + WebGL

## 项目结构

```
.
├── main.js              # Electron主进程
├── preload.js           # 预加载脚本
├── index.html           # HTML模板
├── vite.config.js       # Vite配置
├── package.json         # 项目依赖
├── build/               # 构建相关文件
├── config/              # 配置文件
├── dist-electron/       # Electron构建输出
├── main/                # 主进程代码
├── renderer/            # 渲染进程代码
├── typings/             # TypeScript类型定义
├── web/                 # Web相关资源
└── worker/              # Web Worker
```

## 安装与运行

### 环境要求

- Node.js 16+
- npm 8+ 或 yarn 1.22+

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发模式

#### 仅启动 Vite 开发服务器

```bash
npm run dev
# 或
yarn dev
```

#### 同时启动 Vite 和 Electron

```bash
npm run dev:electron
# 或
yarn dev:electron
```

### 直接运行应用

```bash
npx electron .
```

### 构建生产版本

```bash
npm run build
# 或
yarn build
```

构建完成后，可执行文件将生成在 `dist` 目录下。

### 其他脚本

#### 仅构建渲染器

```bash
npm run build:renderer
# 或
yarn build:renderer
```

#### 仅构建主进程

```bash
npm run build:main
# 或
yarn build:main
```

#### 预览构建结果

```bash
npm run preview
# 或
yarn preview
```

## 核心功能说明

### 1. 图片浏览

- **虚拟滚动**：使用虚拟滚动技术，高效渲染大量图片
- **缩略图预览**：自动生成图片缩略图，支持懒加载
- **图片选择**：支持单选、多选、范围选择

### 2. 图片查看

- **缩放控制**：放大、缩小、适应窗口、原始尺寸
- **旋转翻转**：左旋、右旋、水平翻转、垂直翻转
- **平移拖动**：支持鼠标拖动平移图片
- **Before/After 对比**：实时对比修图前后效果

### 3. 修图功能

#### 3.1 边框添加

- 自定义边框宽度
- 自定义边框颜色
- 自定义圆角半径

#### 3.2 水印添加

- 自定义水印文字
- 自定义字体大小
- 自定义透明度
- 自定义位置（9 个预设位置）

#### 3.3 背景虚化

- 自定义模糊程度
- 支持不同模糊算法

#### 3.4 曲线调整

- RGB 通道整体调整
- 红、绿、蓝通道单独调整
- 支持多点曲线编辑
- 实时预览效果

## 性能优化

1. **虚拟滚动**：只渲染可见区域的图片，减少 DOM 节点数量
2. **Web Worker**：将耗时的图像处理操作放到 Worker 中执行，避免阻塞主线程
3. **Canvas 离屏渲染**：使用离屏 Canvas 进行图像处理，提高性能
4. **WebGL 加速**：对于复杂的曲线调整，使用 WebGL 进行 GPU 加速
5. **LUT 缓存**：缓存曲线查找表，避免重复计算
6. **图片懒加载**：只加载可见区域的图片缩略图

## 开发指南

### 添加新功能

1. 在`renderer/src/components/`目录下创建新组件
2. 在`renderer/src/store/imageStore.js`中添加状态管理
3. 在`renderer/src/utils/`目录下添加工具函数
4. 在`App.vue`中引入并使用新组件

### 图像处理 API

```javascript
// CanvasEditor.js
const editor = new CanvasEditor(imageElement);
editor.addBorder(10, "#000000", 5);
editor.addWatermark("水印文字", { x: 10, y: 10 }, 16, 0.5);
editor.applyBackgroundBlur(10);

// CurvesProcessor.js
const processor = new CurvesProcessor(imageElement);
processor.setCurves("rgb", [
  { input: 0, output: 0 },
  { input: 0.5, output: 0.6 },
  { input: 1, output: 1 },
]);
processor.applyCurves();
```

## 许可证

GPL-3.0-only License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更新日志

### v10.1.0

- ✨ 升级到 Vue 3 + Ant Design Vue 4
- ✨ 新增 Before/After 对比功能
- ✨ 优化曲线调整算法，使用 WebGL 加速
- 🐛 修复了部分图片格式不支持的问题
- 🎨 优化 UI 设计，提升用户体验

### v10.0.0

- 🚀 基于 Electron 重构，支持跨平台
- ✨ 新增虚拟滚动图片列表
- ✨ 新增批量处理功能
- ✨ 新增曲线调整功能
- 🎨 全新 UI 设计