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