Files

ZF sun 8789a76ecc fix(editor): 修复字号读取及工具栏逻辑

重构编辑器工具栏字号调整逻辑，优先读取内联样式字号，
修复字号显示不同步问题，并更新 README 文档

2026-05-15 14:47:57 +08:00

4.9 KiB

Raw Blame History

极简邀请函制作工具

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

项目结构

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

4.9 KiB Raw Blame History Unescape Escape