# biaoqing_bao

**Repository Path**: git-lyn/biaoqing_bao

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-07
- **Last Updated**: 2026-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 表情包编辑器

一个功能完整的表情包编辑软件，支持图像上传、编辑、动态效果和导出功能。

## 项目结构

- `biaoqing/` - 后端项目（Spring Boot）
- `font/first/` - 前端项目（Next.js + React + TypeScript）

## 功能特性

### 前端功能
- ✅ 图像上传和预览
- ✅ Canvas 绘图和编辑（裁剪、缩放、旋转）
- ✅ 实时预览
- ✅ 动态效果（闪烁、旋转、跳动）
- ✅ 表情导出（PNG、GIF）
- ✅ 表情保存

### 后端功能
- ✅ 图像上传 API
- ✅ 图像处理（裁剪、旋转、缩放）
- ✅ 表情保存到数据库
- ✅ 表情导出（PNG、GIF）
- ✅ 动态效果生成

## 技术栈

### 后端
- Spring Boot 4.0.2
- Java 17
- MySQL 8.0
- Spring Data JPA
- Thumbnailator（图像处理）

### 前端
- Next.js 16.1.6
- React 19.2.3
- TypeScript 5
- Tailwind CSS 4
- Axios

## 快速开始

### 后端设置

1. 安装 MySQL 数据库并创建数据库：
```sql
CREATE DATABASE biaoqing_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 修改 `biaoqing/biaoqing/src/main/resources/application.properties` 中的数据库配置：
```properties
spring.datasource.username=你的数据库用户名
spring.datasource.password=你的数据库密码
```

3. 启动后端服务：
```bash
cd biaoqing/biaoqing
./mvnw spring-boot:run
```

后端服务将在 `http://localhost:8080` 启动。

### 前端设置

1. 安装依赖：
```bash
cd font/first
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

前端应用将在 `http://localhost:3000` 启动。

## API 接口

### 上传图片
```
POST /api/emoji/upload
Content-Type: multipart/form-data
Body: file (图片文件)
```

### 保存模板
```
POST /api/emoji/save
Content-Type: application/json
Body: {
  "id": 1,
  "name": "表情名称",
  "scaleX": 1.0,
  "scaleY": 1.0,
  "rotation": 0,
  "effectType": "blink"
}
```

### 获取模板
```
GET /api/emoji/{id}
```

### 获取所有模板
```
GET /api/emoji/list
```

### 导出 PNG
```
GET /api/emoji/{id}/export/png
```

### 导出 GIF
```
GET /api/emoji/{id}/export/gif
```

## 使用说明

1. **上传图片**：点击"选择图片上传"按钮，选择要编辑的图片（支持 JPG、PNG、GIF，最大 10MB）

2. **编辑图片**：
   - 在 Canvas 上拖拽移动图片
   - 使用鼠标滚轮缩放图片
   - 使用控制面板调整缩放比例和旋转角度

3. **添加动态效果**：
   - 选择闪烁、旋转或跳动效果
   - 在预览面板实时查看效果

4. **保存设计**：点击"保存设计"按钮将当前设计保存到数据库

5. **导出表情**：
   - 点击"导出为 PNG"导出静态图片
   - 点击"导出为 GIF"导出动态表情（如果应用了动态效果）

## 文件存储

- 上传的图片存储在 `./uploads` 目录
- 导出的文件存储在 `./exports` 目录

## 注意事项

1. 确保 MySQL 数据库已安装并运行
2. 确保后端服务在 8080 端口运行
3. 前端需要连接到后端 API，确保 CORS 配置正确
4. 首次运行会自动创建数据库表结构

## 开发调试

### 前端调试
- 检查浏览器控制台的错误信息
- 使用 React DevTools 调试组件状态
- 检查网络请求是否成功

### 后端调试
- 查看控制台日志
- 检查数据库连接
- 验证文件上传路径权限

## 许可证

MIT License