极简邀请函制作工具
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具。无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字/图片/二维码、拖动调整位置，最终一键生成并保存完整邀请函图片。
项目结构
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 管理，可直接修改无需改动主逻辑：
// input1 - 企业（left: 100px, top: 218.4px）
// input2 - 嘉宾（left: 100px, top: 261.4px）
// input3 - 编号（left: 100px, top: 308.1px）
使用说明
最简流程
- 打开页面（自动加载默认背景图）
- 上传背景图（可选，点击「背景图」按钮更换）
- 双击输入框填写文字
- 单击输入框拖动到合适位置
- 电脑：右键预览区域保存/复制图片
- 手机：长按预览区域或点击「保存/预览」保存图片
进阶操作
- 添加层叠图：点击「层叠图」按钮，选中后可拖动/缩放/旋转/镜像
- 添加文本框：点击「文本」按钮，可任意添加更多文字元素
- 添加二维码：点击左下角「二维码」按钮，输入内容生成
- 图层管理：点击「图层」按钮打开右侧面板，可调整顺序和可见性
- 撤销/重做：使用顶部工具栏的撤销/重做按钮或快捷键（Ctrl+Z/Ctrl+Y）
预览区域
- 固定 3:5 宽高比（960x1361）
- 容器最大宽度 360px，页面居中显示
- 背景图自适应铺满容器，超出部分自动裁剪
技术栈
- 原生 HTML/CSS/JS，零外部依赖
- 使用
canvas进行高清无损合成导出 - 图片缓存系统（最大缓存 20 张）
- 内存监控与自动清理
- 防抖/节流优化
- 二维码：基于 qrcodejs 库生成
- 所有资源均可在子目录部署（如
/tool/invitation-maker/）
开发计划
详见 IMPROVEMENTS.md，主要方向：
- 代码模块化重构
- 模板系统
- 更多元素类型（形状、贴纸等）
- 高级文本功能
- 图片滤镜与裁剪
- 自动保存与草稿
- 暗黑模式
最后更新: 2026-05-15