invitation-maker/README.md

*** 项目要求 ***
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具，无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字、拖动位置，最终一键生成并保存完整邀请函图片。
核心功能
1. 设备适配
移动端优先设计，手机操作最流畅
电脑端完全兼容，可正常制作、编辑、保存
背景图自动适应屏幕大小，不变形、不拉伸
2. 预览区域规范
预览区域固定 3:5 比例
容器在页面居中显示，美观大方
背景图自适应铺满容器
3. 背景图上传
支持本地图片上传
支持 jpg /png/jpeg 格式
自动居左显示、自适应保留原有比例
4. 输入框功能
页面加载自动在右下角生成 2 个输入框，输入框为透明无边框设计
双击输入框 → 编辑文字
点击 / 长按输入框 → 可拖动位置
两个输入框完全独立，拖动互不影响
可随意拖拽到预览区域内任意位置
5. 操作交互优化
点击空白区域 → 自动取消输入框选中状态
未选中时无法编辑、无法拖动
避免误触、避免乱跑、避免重叠操作
6. 图片保存 / 导出（最重要）
电脑端：右键预览区域 → 自动合成并保存图片
手机端：长按预览区域 → 自动合成并保存图片
合成内容 = 背景图 + 所有输入框文字
输出一张完整的邀请函图片
***使用说明（最简流程）***
打开页面
上传背景图
双击输入框填写文字
单击输入框拖动到合适位置
电脑：右键保存图片
手机：长按保存图片
完成制作

## 要求记录
1. 打开项目即显示 3:5 空白面板，背景图自动覆盖容器、超出部分自动裁剪，不拉伸、不变形
2. 要求两个独立输入框，可双击编辑、可拖动，文字背景透明无边框，放置在右下角
3. 要求电脑端：右键预览区域可直接复制图片到剪贴板，移动端：长按预览区域可保存图片，操作简单，一键导出图片（复制 / 保存）
4. 预览的图片样式和保存的样式不一样，需要改成预览是什么样子，保存出来的图片内容就是什么样子
5. 要求鼠标右击或手机长按屏幕3：5预览区域时是保存图片的状态，点击其他区域不是保存状态
6. 要求图片和屏幕尺寸大小不一致时可在预览框中左右滑动图片调整位置，保持图片比例不变，点击空白处不选中任何输入框和图片状态，图片位置调整不影响文字编辑位置调整
7. 文本字体颜色为黑色，字体为 "微软雅黑"，字体大小为 16px，输入框放置在右下角
8. 打开项目时预览区域在屏幕居中显示，选择图片后图片在预览区居左显示，将底部请点击上方「添加图片」按钮上传背景图文字移到背景图预览白板提示中
9. 背景图选择后居左显示，图片原比例保存不变，可以左右滑动调节位置不能小于预览区宽度，预览区与图片合并到同一个图层中，不独立存在，以图片左右为边缘不溢出不拉伸，保持图片比例不变
10. 输入框与背景图完全隔离：输入框的文字编辑、拖动、内容溢出，仅改变输入框自身的位置/大小，不带动背景图偏移，不撑大预览容器，背景图的滑动调整，不影响输入框的位置、编辑状态，操作互不干扰
11. 添加图片尺寸不一致时可以左右滑动图片调整位置，并且图片反转拖拽
12. 电脑端右键保存/复制/预览图片，手机端长按屏幕弹窗保存/复制/预览图片，可预览
13. 顶部工具栏下方16px的位置，固定放置文本编辑器工具栏，加粗，斜体，字体颜色，字体，字号，可编辑文字样式
14. 字号逻辑调整，输入框字号只在自身原本字号上增减
15. 文本输入框添加辅助线，完善辅助线的吸附逻辑更加精准，辅助线颜色为红色
16. 顶部工具栏新增层叠图，可添加多张层叠图，单击选中状态可缩放删除自由移动位置，置于背景图之上，输入框与层叠图点击只能同时选中一个
17. 层叠图添加辅助线
18. 可添加多个文本框，以及文本框删除功能
19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板
20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏，两个编辑栏的宽高保持和文本编辑器工具栏一致
21. 调整图文工具栏布局，解决顶部遮挡问题，图片透明度滑块添加百分比
22. 给背景图添加编辑器，与层叠图编辑器文本编辑器通用一个工具栏，背景图工具栏功能为：背景图可以放大缩小，可以调节透明度，其余功能不受影响，点击层叠图只显示当前编辑器工具栏






## 需要注意的点

1. 图片要必须能左右滑动调整位置，保持图片比例不变，图片任何内容都可以被拖动到预览区域内任意位置