迅排设计 Poster Design 2.0：开箱即用的开源 AI 海报设计器与在线图片编辑器
迅排设计（poster-design）是一个开源 AI 海报设计器 / 在线图片设计工具，采用原生 DOM 画布编辑器，前端与服务端混合出图，附完整后台管理与接口。2.0 开源版新增免费 AI 生图、AI 文案与浏览器端 AI 抠图，支持 PSD 解析生成模板，适用于海报生成、电商产品图、文章长图、视频/公众号封面等场景，遵循 AGPL-3.0 协议。
社区作者 · zZz
它解决什么问题
迅排设计 AI Poster Design 2.0 是一个开箱即用、可零开发部署生产的开源 AI 海报设计器 / 在线图片设计工具：原生 DOM 画布编辑器，前端与服务端混合出图，附完整后台管理与接口，简洁好用、易于开发。适用于海报图片生成、电商图、文章长图、视频/公众号封面等多种场景（配图 1 为其 2.0 版本预览示意）。
全新开源版 2.0 增加了免费的 AI 功能，且相比旧版拥有完整的后台管理与接口，真正做到开箱即用；旧版请访问 mit-version 分支。编辑器 100% 全功能可用，内置高级文字、图片编辑工具，以及免费 AI 生图、文案与无需部署的 AI 抠图。
项目特点：界面美观细节丰富，基础功能完善；原生 DOM 画布 + 服务端出图，操作体验顺滑、开发门槛低；支持导入 PSD 设计文件解析辅助生成模板；AI 抠图工具可一键去除背景，并支持画笔修补擦除。
主要技术栈与框架：Vue3、Vite5、Pinia、TypeScript，Node.js + Express + ElementPlus；图片合成使用 Puppeteer（后端）与 html2canvas（前端），图像处理使用 sharp；数据库为 better-sqlite3（内嵌 SQLite，DB 文件位于 service/data/poster.db）。
服务端使用 SQLite 持久化模板、组件、分类、字体、用户、作品和图片数据，启动时自动执行表结构迁移；文件上传接口支持 multipart/form-data 图片及字体文件上传，文件保存到 static/ 目录。
（附录）开源版功能清单： 基础设计功能——元素拖拽放置与自由定位、组合与拆分、缩放、对齐与分布（水平/垂直对齐及多元素均匀分布）。 文本功能——基础文字编辑（字体、字号、颜色、斜体、下划线加粗、间距行距、对齐方式等）；基于 CSS 的文字高级特效（阴影、描边、渐变等，可组合使用）；花字组合（文字与图片 icon 的自由组合组件）。 图像处理功能——图片素材插入与替换；图片裁剪（圆角、缩放裁剪显示区域）；图片蒙版/容器；SVG 素材编辑颜色、透明度等属性。
画布与画板设置——自定义画布尺寸（拖动把手实时改变、内置尺寸预设）；鼠标滚轮或点击缩放；画布颜色或背景图片修改（单色、渐变色）；前端水印；历史记录与撤销重做；多画板支持。 辅助功能——PSD 解析（设计稿还原到网页，辅助创建模板）；画笔修补擦除抠图工具；吸附线对齐线；标尺和辅助引导线；漫游导航。 快捷操作与交互——键盘快捷键（复制、粘贴、撤销、重做、成组等）；右键菜单（复制、删除、层级调整等）。 二维码功能——二维码生成（自定义颜色、大小、样式）；二维码风格设置（单色、渐变色、自定义 logo 嵌入等）。
图层与颜色工具——图层操作（拖拽变更层级、锁定/解锁）；调色板与吸色器（可从电脑画面吸取颜色）；渐变色支持（多颜色节点、角度调整）。 用户与作品管理——用户注册、登录及登录状态维护；保存设计作品并可继续编辑；访问、删除、下载和保存自己的作品。
管理后台——管理员权限校验，仅管理员可访问后台接口；模板与组件分开管理，支持列表查看、删除、编辑基础信息及修改分类；查看和管理用户作品、用户上传图片及用户列表；用户上传图片绑定归属，普通用户仅能查看自己的图片，管理员可查看全部；分类管理覆盖模板、组件、素材、图片四类的新增、重命名、删除及数量查看；字体管理支持分页、搜索、新增、编辑、删除及 woff/woff2 文件上传；AI 配置兼容任意 OpenAI 格式接口（默认智谱开放平台），可在后台配置接口地址、API Key、文案/生图模型与生图尺寸档位，并在线测试连通性。
AI 能力：内置免费 AI 生图、AI 文案，AI 抠图无需部署。抠图基于 rembg / rembg-web，在浏览器端使用 onnxruntime-web + u2netp 轻量模型（约 4.7MB）实现 AI 自动抠图。AI 生图与文案的模型名称、参数规模来源未明确，需在后台自行配置 OpenAI 兼容接口与模型，具体型号以所接入平台为准（待核验）。
开源版与迅排 Plus（付费企业版）对比：开源版面向个人开发者、学习研究、内部二次开发，采用自部署方式，交付形态为社区 Issue 交流 + 自行二开，社区支持；迅排 Plus 面向企业业务团队、需对外交付的设计站点，提供企业私有化部署、源码交付与定制开发、专属技术服务与长期维护。
项目使用或参考的开源项目包括：moveable（画布中选择、拖动缩放等能力）、html2canvas（前端出图简单方案）、qr-code-styling（生成风格化二维码）、rembg / rembg-web（浏览器端 AI 自动抠图）。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
【准备环境】 需要 Node.js 与 npm 环境（具体 Node 版本要求来源未明确，待核验）。AI 抠图模型与 onnxruntime 运行时随仓库分发，无需额外下载。
【本地开发】
步骤 1 · 克隆仓库：
git clone https://github.com/palxiao/poster-design.git步骤 2 · 进入目录：
cd poster-design步骤 3 · 安装与准备依赖：
npm run prepared步骤 4 · 启动开发服务：
npm run serve注意：如中途失败请拆开命令运行；更多详情可参阅项目文档（旧版）。
- 浏览器访问站点：http://127.0.0.1:5173/
【管理后台】 访问 http://127.0.0.1:5173/admin ，管理员默认账号 admin / 123456 。
【后端 & 图片生成】
- 后端服务位于 /service 目录。
- 生成的图片与用户上传文件落盘到 static/ 目录后，由服务以 /static/* 路径对外暴露。
- 管理后台相关接口（模板/素材/用户图片/分类管理）由 requireAdmin 中间件鉴权保护。
- 注：早期版本的接口 API 文档仍可作为部分接口形态的参考范本。
【部署上线】
步骤 1 · 构建前端：在根目录执行
npm run build，产物在 dist/ （AI 抠图模型 public/models/ 与 onnxruntime 运行时 public/ort/ 会一并拷入产物，随仓库分发，无需额外下载）。
步骤 2 · 启动后端：在 service 目录安装依赖后执行
npm run build && npm run serverstart（pm2），或
npm run serve 直接运行。
- 反向代理：前端与后端同源部署，将 /api 、/design 、/static 转发到后端端口（默认 7001 ）。若前后端不同源，构建时设置环境变量 VITE_API_URL=https://你的后端地址 即可。
【AI 配置】 在管理后台配置 AI：兼容任意 OpenAI 格式接口（默认智谱开放平台），可设置接口地址、API Key、文案/生图模型与生图尺寸档位，并在线测试连通性。
【常见问题】
- 本地启动中途失败：请将 npm run prepared 与 npm run serve 拆开分别运行。
- 前后端不同源导致接口不可用：构建时设置 VITE_API_URL 指向后端地址。
- 管理后台接口 401/无权访问：确认使用管理员账号登录（默认 admin / 123456 ）并通过 requireAdmin 鉴权。
