# 极简邀请函制作工具

一款以手机端为主、电脑端兼容的简易邀请函在线制作工具。无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字/图片/二维码、拖动调整位置，最终一键生成并保存完整邀请函图片。

---

## 项目结构

```
d:\projects\invitation-maker/
├── index.html              # 主入口页面
├── README.md               # 项目说明文档
├── IMPROVEMENTS.md         # 升级改进计划
├── images/
│   └── default-bg.jpg      # 默认背景图片
├── css/
│   ├── style.css           # 主样式
│   └── qr.css              # 二维码功能样式
└── js/
    ├── script.js           # 核心应用逻辑（~3970 行）
    ├── qr.js               # 二维码功能模块
    └── inputs-config.js    # 输入框初始化配置（独立配置文件）
```

---

## 功能特性

### 核心功能

| 功能 | 说明 |
|------|------|
| **背景图** | 上传 jpg/png 图片，自动适应预览区域，保持原比例，可左右滑动调整位置，支持缩放和透明度调节 |
| **默认背景** | 页面打开自动加载默认背景图，点击「背景图」按钮可更换 |
| **文字编辑** | 3 个预设输入框（企业、嘉宾、编号），支持添加更多文本，双击编辑文字，单击拖拽位置 |
| **文本样式** | 加粗、斜体、字体选择、字号选择、颜色选择，通过编辑器工具栏操作 |
| **层叠图** | 可添加多张层叠图片，置于背景图之上，支持拖动、缩放、旋转（含 0°/90°/-90° 吸附）、透明度、水平镜像、删除 |
| **二维码** | 弹窗输入内容生成二维码，支持拖动、缩放、透明度调节，可添加到画布任意位置 |
| **图层管理** | 侧边栏图层面板，显示所有元素层级，支持顺序调整（上移/下移/置顶/置底）、可见性切换、删除 |
| **撤销/重做** | 支持操作历史撤销（Ctrl+Z）与重做（Ctrl+Y） |
| **辅助线** | 拖拽元素时红色吸附对齐辅助线 |
| **网格线** | 可选显示 10px 网格辅助线 |
| **元素锁定** | 锁定后不可拖动/编辑（锁定状态黄色虚线） |
| **位置信息** | 选中或拖拽输入框时，上方显示实时 left/top 坐标 |

### 编辑器工具栏

编辑器工具栏固定于顶部工具栏下方，根据选中元素自动切换：

| 选中元素 | 显示的工具 |
|---------|-----------|
| 文字输入框 | 加粗、斜体、字体、字号、颜色、删除、锁定 |
| 层叠图 | 透明度、旋转、水平镜像、缩放、删除、锁定 |
| 背景图 | 缩放、透明度 |
| 二维码 | 透明度、缩放 |

### 图片保存/导出

- **电脑端**：右键预览区域 → 合成并保存/复制/预览图片
- **手机端**：长按预览区域或点击「保存/预览」按钮 → 弹窗选择保存/预览
- **输出格式**：高清 PNG，至少 2x 分辨率（最小 1080x1920），所见即所得
- **微信兼容**：针对微信内置浏览器优化画布尺寸限制和渲染逻辑

### 输入框配置

三个预设输入框的初始化位置和样式通过独立配置文件 `js/inputs-config.js` 管理，可直接修改无需改动主逻辑：

```js
// input1 - 企业（left: 100px, top: 218.4px）
// input2 - 嘉宾（left: 100px, top: 261.4px）
// input3 - 编号（left: 100px, top: 308.1px）
```

---

## 使用说明

### 最简流程

1. 打开页面（自动加载默认背景图）
2. 上传背景图（可选，点击「背景图」按钮更换）
3. 双击输入框填写文字
4. 单击输入框拖动到合适位置
5. 电脑：右键预览区域保存/复制图片
6. 手机：长按预览区域或点击「保存/预览」保存图片

### 进阶操作

- **添加层叠图**：点击「层叠图」按钮，选中后可拖动/缩放/旋转/镜像
- **添加文本框**：点击「文本」按钮，可任意添加更多文字元素
- **添加二维码**：点击左下角「二维码」按钮，输入内容生成
- **图层管理**：点击「图层」按钮打开右侧面板，可调整顺序和可见性
- **撤销/重做**：使用顶部工具栏的撤销/重做按钮或快捷键（Ctrl+Z/Ctrl+Y）

---

## 预览区域

- 固定 3:5 宽高比（960x1361）
- 容器最大宽度 360px，页面居中显示
- 背景图自适应铺满容器，超出部分自动裁剪

---

## 技术栈

- **原生 HTML/CSS/JS**，零外部依赖
- 使用 `canvas` 进行高清无损合成导出
- 图片缓存系统（最大缓存 20 张）
- 内存监控与自动清理
- 防抖/节流优化
- **二维码**：基于 qrcodejs 库生成
- 所有资源均可在子目录部署（如 `/tool/invitation-maker/`）

---

## 开发计划

详见 `IMPROVEMENTS.md`，主要方向：
- 代码模块化重构
- 模板系统
- 更多元素类型（形状、贴纸等）
- 高级文本功能
- 图片滤镜与裁剪
- 自动保存与草稿
- 暗黑模式

---

*最后更新: 2026-05-15*