一、介绍

poster-design是一个最酷的开源在线海报图片设计器，漂亮易用且功能强大。它适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现创意、迅速完成排版。使用Vue3 、Vite5 、Vuex 、ElementPlus开发，丝滑的页面操作体验，丰富的交互细节，基础功能完善，采用服务端生成图片，确保多端出图统一性，支持各种 HTML5 特性。

技术栈：

前端：Vue3 、Vite2 、Vuex 、ElementPlus

图片生成：Puppeteer、Express

服务端：Node.js

支持功能：

导入 PSD 文件解析成模板、在线导出图片下载。

元素拖拽、组合、缩放、层级调整、对齐等操作。

图片素材插入、替换、裁剪，图片容器等功能。

SVG 素材颜色、透明度编辑，文字花字组合。

画布自定义尺寸、滚轮缩放、自适应画布

吸附对齐、辅助引导线、标尺功能。

键盘快捷键、右键菜单快捷操作，复制删除等常用操作。

风格二维码编辑，支持单色、渐变、自定义 logo 等。

图层操作，支持拖拽变更层级。

颜色调色板，原生级取色器颜色吸管（Chrome）。

二、安装使用

推荐环境

Node.js v16.18.1

代码拉取

git clone https://github.com/palxiao/poster-design.git

cd poster-design

安装依赖

npm run prepared

运行

npm run serve

运行结果
访问 http://127.0.0.1:3000/ 查看网页。

打包

npm run v-build

服务器可以根据自己的具体场景自行实现。本项目支持本地编译运行体验编辑器功能，不支持直接部署生产，如需在生产中使用本项目，需自行开发配套后端系统，自行部署图片生成服务等。

本项目前端编辑器完全开源，仅需在代码中保留项目 MIT 开源许可证，您可以随意修改或二次开发、免费部署和发布。

开源地址：

github地址：https://github.com/palxiao/poster-design

gitee地址：https://gitee.com/palxiao95/poster-design

文档地址：https://xp.palxp.cn