poster-design

浏览器里拖拽做海报，几分钟出图直接导出

迅排设计（poster-design）是一款基于 Vue3 与 Canvas 的开源在线图片编辑器，定位类似稿定设计的轻量替代方案。它解决的核心问题是让非专业设计师也能在浏览器里快速完成海报、电商产品图、文章长图、视频与公众号封面等物料制作，无需安装 Photoshop 等重型软件。项目提供拖拽式画布编辑、图层管理、素材与文字排版、图片导出等能力，并集成 AI 相关工具与 Puppeteer 服务端渲染，支持将设计稿稳定输出为图片。整体采用前后端分离架构，前端 Vue3 + Moveable 实现元素拖拽缩放旋转，后端 Node.js 负责渲染与导出，适合二次开发成企业营销物料平台、电商主图工具或自媒体配图系统。

开源 unknown 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 4898

维护状态较活跃

是否开源是

定价模式 unknown

项目预览

项目数据

分类设计创意

开发团队palxiao

所属国家

官网地址https://design.palxp.cn

GitHubhttps://github.com/palxiao/poster-design

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议AGPL-3.0

主要语言Vue

技术栈/模型ai,ai-tools,canvas,design,image,moveable,nodejs,poster,puppeteer,vue3

GitHub 星标★ 4898

30天Star增速

HF 下载量

上线时间2022-02-01 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态较活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-08

浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：进阶约 20 分钟部署方式：本地安装 7 步

环境要求

Node.js 与 npm 环境（前端与后端均使用 npm 命令构建、启动）
pm2（后端使用 npm run serverstart 时依赖 pm2 进程管理）
反向代理服务（如 Nginx），需将 /api、/design、/static 转发到后端端口
后端服务默认端口 7001 可用
AI 抠图模型（public/models/）与 onnxruntime 运行时（public/ort/）随仓库分发，无需额外下载

安装与启动步骤

1获取项目源码

从 GitHub 克隆开源版 2.0 仓库到本地，README 中旧版位于 mit-version 分支，请使用默认分支。
```
git clone https://github.com/palxiao/poster-design.git
cd poster-design
```
2构建前端

在项目根目录执行构建，产物输出到 dist/ 目录，AI 抠图模型与 onnxruntime 运行时会一并拷入产物。
```
npm run build
```
3安装后端依赖

进入 service 目录安装后端依赖，README 说明后端在 service 目录，安装依赖后再进行构建与启动。
```
cd service
npm install
```
4构建并启动后端

在 service 目录构建后端，并使用 pm2 方式启动服务；后端默认监听 7001 端口。
```
npm run build && npm run serverstart
```
5直接运行后端（可选）

不想用 pm2 时，可在 service 目录用 npm run serve 直接运行后端服务，适合调试场景。
```
npm run serve
```
6配置反向代理

前端与后端同源部署，将 /api、/design、/static 三个路径转发到后端端口（默认 7001），在 Nginx 等代理中配置。
7设置跨域后端地址

若前后端不同源，需在构建前端时设置环境变量 VITE_API_URL 指向你的后端地址，然后重新执行构建。
```
VITE_API_URL=https://你的后端地址 npm run build
```

关键配置

配置项	必填	说明	示例
`VITE_API_URL`	否	前后端不同源时，构建前端时指定后端地址	`https://api.your-domain.com`
`后端端口`	否	反向代理需把 /api、/design、/static 转发到该端口	`7001`

如何确认成功

反向代理配置完成后访问前端页面，编辑器能正常加载并完成图片导出，后端 7001 端口可正常响应，即部署成功。

常见问题

Q：AI 抠图模型需要额外下载吗？

A：不需要。AI 抠图模型位于 public/models/，onnxruntime 运行时位于 public/ort/，会随仓库分发并一并拷入构建产物。

Q：前后端不同源怎么处理？

A：在构建前端时设置环境变量 VITE_API_URL 为你的后端地址，再执行 npm run build，让前端请求指向该后端。

Q：必须使用 pm2 启动后端吗？

A：不是。service 目录下既可用 npm run build && npm run serverstart（pm2 方式），也可用 npm run serve 直接运行。

Q：反向代理要转发哪些路径？

A：需要把 /api、/design、/static 转发到后端端口，后端默认端口为 7001。

注意事项

前端构建产物在 dist/ 目录，部署时以该目录为站点根目录
后端代码位于 service 目录，需先安装依赖再构建启动
同源部署时依靠反向代理转发 /api、/design、/static，无需额外配置跨域
企业级私有化部署与定制开发由迅排 Plus 提供付费服务，本仓库为开源版

核心亮点

Vue3 + Canvas 实现拖拽、缩放、旋转、图层管理，编辑体验接近商业在线设计工具
内置海报、电商图、长图、封面等多场景模板思路，开箱即可改造成业务物料系统
前后端分离并集成 Puppeteer 服务端渲染，导出图片稳定，便于接入自有后端与 AI 能力

不足之处

AI 能力目前更多是集成方向，实际智能生成/抠图等深度功能依赖外部服务，开箱即用程度有限
项目文档与生态相对成长中，复杂排版、协同编辑等高级场景仍需自行扩展

适用场景

电商运营快速制作商品主图与促销海报
自媒体批量生成公众号封面和文章长图
企业市场部搭建内部营销物料在线设计平台

替代项目

vue-fabric-editor、react-design-editor

项目介绍

poster-design 是设计创意领域的开源项目，由 palxiao 开发，2022 年首次发布。

在全站 13,916 个收录项目中，它的 GitHub 星标数（4,898）位列前 9%，在设计创意分类的 192 个项目里位列前 11%。

项目保持着较活跃的维护节奏，最近一次代码更新于 2026-09-10。

它主要面向的使用场景是：电商运营快速制作商品主图与促销海报。同类可对比的替代方案包括 vue-fabric-editor、react-design-editor。

上一篇：open-pencil

下一篇：interior-designer-ai