# image-editing

**Repository Path**: yunianvh/image-editing

## Basic Information

- **Project Name**: image-editing
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-04
- **Last Updated**: 2025-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片编辑器

一个功能强大的图片编辑器，支持裁剪、滤镜、旋转等编辑功能，同时提供桌面端和Web端版本。

## 功能特性

### 🖼️ 图片编辑功能
- **文件操作**: 打开、保存图片，支持拖拽上传
- **基础编辑**: 裁剪、旋转、翻转、重置
- **滤镜效果**: 亮度、对比度、饱和度、模糊、复古、黑白
- **高级功能**: 撤销/重做、缩放、适应窗口

### 🖥️ 双平台支持
- **桌面端**: 使用Electron构建，支持Windows、macOS、Linux
- **Web端**: 基于HTML5 Canvas，浏览器直接运行

## 快速开始

### 安装依赖
```bash
npm install
```

### 运行桌面端
```bash
# Windows
start-desktop.bat

# 或使用命令行
npm start
```

### 运行Web端
```bash
# Windows
start-web.bat

# 或使用命令行
npm run dev
```

### 构建应用
```bash
# Windows
build.bat

# 或使用命令行
npm run build    # 构建Web版本
npm run dist     # 打包桌面端
```

## 使用说明

### 基本操作
1. **打开图片**: 点击"打开图片"按钮或直接拖拽图片到画布
2. **编辑图片**: 使用左侧工具栏的各种编辑功能
3. **保存图片**: 点击"保存图片"按钮导出编辑后的图片

### 编辑工具
- **裁剪**: 点击裁剪按钮进入裁剪模式，调整裁剪区域后再次点击应用
- **旋转**: 将图片顺时针旋转90度
- **翻转**: 水平翻转图片
- **重置**: 恢复到原始图片状态

### 滤镜效果
- **亮度**: 调整图片亮度（-100到+100）
- **对比度**: 调整图片对比度（-100到+100）
- **饱和度**: 调整图片饱和度（-100到+100）
- **模糊**: 为图片添加模糊效果（0到20像素）
- **复古**: 应用复古滤镜效果
- **黑白**: 将图片转换为黑白效果

### 快捷键
- `Ctrl/Cmd + O`: 打开图片
- `Ctrl/Cmd + S`: 保存图片
- `Ctrl/Cmd + Z`: 撤销
- `Ctrl/Cmd + Shift + Z`: 重做
- `Escape`: 退出裁剪模式

## 项目结构

```
image-editing/
├── package.json          # 项目配置和依赖
├── main.js              # Electron主进程
├── index.html           # 桌面端HTML
├── web.html            # Web端HTML
├── vite.config.js      # Vite配置
├── src/
│   └── renderer.js     # 渲染进程主逻辑
├── assets/             # 静态资源目录
├── dist/               # 构建输出目录
├── start-desktop.bat   # 启动桌面端脚本
├── start-web.bat       # 启动Web端脚本
└── build.bat           # 构建应用脚本
```

## 技术栈

### 桌面端
- **Electron**: 跨平台桌面应用框架
- **HTML5 Canvas**: 图片处理和渲染
- **Node.js**: 文件系统操作

### Web端
- **Vite**: 现代化前端构建工具
- **HTML5 Canvas**: 图片处理和渲染
- **原生JavaScript**: 无框架依赖

## 开发说明

### 添加新功能
1. 在 `src/renderer.js` 中添加新的编辑功能
2. 在 HTML 文件中添加对应的UI控件
3. 更新CSS样式保持界面一致性

### 自定义滤镜
可以通过修改 `applyFilter` 方法来添加新的滤镜效果：

```javascript
applyCustomFilter(value) {
    if (!this.currentImage) return;
    
    // 自定义滤镜逻辑
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    
    // 应用滤镜
    tempCtx.filter = `custom-filter(${value}%)`;
    tempCtx.drawImage(this.currentImage, 0, 0);
    
    // 更新当前图片
    const img = new Image();
    img.onload = () => {
        this.currentImage = img;
        this.drawImage();
        this.saveHistory();
    };
    img.src = tempCanvas.toDataURL();
}
```

## 构建和发布

### 桌面端构建
```bash
npm run dist
```
构建完成后，安装包会生成在 `dist` 目录中。

### Web端构建
```bash
npm run build
```
构建完成后，Web版本文件会生成在 `dist` 目录中。

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目！