131 lines
4.9 KiB
Markdown
131 lines
4.9 KiB
Markdown
# 极简邀请函制作工具
|
||
|
||
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具。无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字/图片/二维码、拖动调整位置，最终一键生成并保存完整邀请函图片。
|
||
|
||
---
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
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*
|