poster-design

<p align="center">
<img style="height: 90px" src="https://github.com/user-attachments/assets/e2b8c788-aded-4b1a-83ee-9bde124f5808" alt="迅排设计 Poster Design 2.0">
</p>
<p align="center">
  迅排设计 AI Poster Design 2.0
</p>
<p align="center">
<a href="https://trendshift.io/repositories/8728" target="_blank"><img src="https://trendshift.io/api/badge/repositories/8728" alt="poster-design | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
  <a href="https://hellogithub.com/repository/56a75cfc34da43549d2bb46dab305ba2" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=56a75cfc34da43549d2bb46dab305ba2&claim_uid=fb0Nckng89FvyzP&theme=neutral" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" /></a>
</p>

一个开箱即用、可零开发部署生产的开源 AI 海报设计器 / 在线图片设计工具：原生 DOM 画布编辑器，前端与服务端混合出图，附完整后台管理与接口，简洁好用、易于开发。

适用于多种场景：海报图片生成、电商图、文章长图、视频/公众号封面等，助力轻松实现创意，迅速图文排版，「迅排」让设计高效又简单！

<p align="center">
<a href="https://design.palxp.cn/">更多功能访问 SaaS 官网</a> | <a href="https://plus.palxp.cn/">企业定制开发 / 私有化部署</a> | <a href="https://xp.palxp.cn/">项目文档（旧版）</a>
</p>

[![](https://xp.palxp.cn/images/2023-7-16-1689500112694.gif)](https://design.palxp.cn/)

全新开源版 2.0 增加了免费的 AI 功能，且相比旧版拥有完整的后台管理与接口，真正做到开箱即用，旧版请访问 mit-version 分支。

### 开源版 2.0 部分预览

| 编辑器100%全功能可用 | 高级文字、图片编辑工具 |
| --- | --- |
| <img width="1623" height="1037" alt="image" src="https://github.com/user-attachments/assets/69ef4fd0-4d83-48a0-8528-051e1159ef1e" /> | <img width="1243" height="826" alt="image" src="https://github.com/user-attachments/assets/d70a39cd-b28d-4b76-ab43-9c392a57e561" /> |

| 内置免费 AI 生图、文案 | AI 抠图，无需部署 |
| --- | --- |
| <img width="1316" height="790" alt="image" src="https://github.com/user-attachments/assets/4f0a2c9c-1774-4263-aba7-f51fd20d9220" /> | <img width="1582" height="978" alt="image" src="https://github.com/user-attachments/assets/9ba2177e-2ea4-4d03-9f5f-cb54a85a7383" /> |

### 项目特点

- 界面美观细节丰富，基础功能完善非Demo项目可比
- 原生 DOM 画布 + 服务端出图，操作体验丝滑，开发门槛低极易上手
- 支持导入 PSD 设计文件解析辅助生成模板
- AI 抠图工具一键去除背景，支持画笔修补擦除
- 主要技术栈与框架：Vue3 、Vite5 、Pinia 、TypeScript，Node.js + Express + ElementPlus
- 图片合成：Puppeteer（后端）、Html2canvas（前端），图像处理：sharp
- 数据库：better-sqlite3（内嵌 SQLite，DB：`service/data/poster.db`）

### 本地开发

```
git clone https://github.com/palxiao/poster-design.git
cd poster-design
npm run prepared
npm run serve
```

输入网址 http://127.0.0.1:5173/ 访问站点（如中途失败请拆开命令运行），更多详情[参阅文档(旧)](https://xp.palxp.cn/#/articles/1689319644311)。

管理后台：http://127.0.0.1:5173/admin（管理员默认账号 `admin / 123456`）

### 后端 & 图片生成

本项目的后端服务（位于 [/service](https://github.com/palxiao/poster-design/tree/main/service)）。

生成的图片与用户上传文件落盘到 `static/` 目录后，由服务以 `/static/*` 路径对外暴露。管理后台相关接口（模板/素材/用户图片/分类管理）由 `requireAdmin` 中间件鉴权保护。

注：早期版本的 [接口 API 文档](https://xp.palxp.cn/apidoc/index.html) 仍可作为部分接口形态的参考范本。

### 部署上线

1. 构建前端：根目录执行 `npm run build`，产物在 `dist/`（AI 抠图模型 `public/models/` 与 onnxruntime 运行时 `public/ort/` 会一并拷入产物，随仓库分发，无需额外下载）。
2. 启动后端：`service` 目录安装依赖后执行 `npm run buil