# image-editor

**Repository Path**: NineteenForty1s/image-editor

## Basic Information

- **Project Name**: image-editor
- **Description**: 一个基于 Vue 3 + Fabric.js 的现代化图片编辑器，提供丰富的图片编辑功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2025-04-01
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, 组件

## README

# 图片编辑器 (Image Editor)

一个基于 Vue 3 + Fabric.js 的现代化图片编辑器，提供丰富的图片编辑功能。

## ✨ 特性

- 🖼️ 基础图片操作
  - 上传图片
  - 更换背景
  - 下载图片
  - 撤销/重做

- 🔄 图片变换
  - 旋转
  - 水平/垂直翻转
  - 重置变换

- 🎨 绘图功能
  - 铅笔工具
  - 喷枪工具
  - 圆形工具
  - 自定义颜色和笔刷大小

- 📐 图形工具
  - 矩形
  - 圆形
  - 三角形
  - 直线

- 📝 文字工具
  - 添加文字
  - 自定义字体颜色
  - 调整字体大小

- 🎯 选区工具
  - 矩形选区
  - 套索选区
  - 魔棒选区

- 🎭 滤镜效果
  - 灰度
  - 亮度
  - 对比度
  - 饱和度
  - 色相
  - 模糊
  - 噪点
  - 像素化

- 🎨 混合模式
  - 正常
  - 正片叠底
  - 滤色
  - 叠加
  - 等多种混合模式
  - 透明度调节

- ✂️ 裁剪功能
  - 自由裁剪
  - 确认/取消裁剪

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 8.0.0

### 安装

```bash
# 克隆项目
git clone [项目地址]

# 进入项目目录
cd image-editor

# 安装依赖
npm install
```

### 开发

```bash
# 启动开发服务器
npm run dev
```

### 构建

```bash
# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 🛠️ 技术栈

- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Element Plus - Vue 3 的组件库
- Fabric.js - 强大的 Canvas 库
- Konva.js - HTML5 Canvas 框架

## 📦 项目结构

```
image-editor/
├── src/
│   ├── components/
│   │   ├── editor/        # 编辑器组件
│   │   └── ImageEditor.vue # 主编辑器组件
│   ├── composables/       # 组合式函数
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── public/               # 静态资源
├── index.html           # HTML 模板
├── package.json         # 项目配置
└── vite.config.js       # Vite 配置
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

[MIT](LICENSE)