Vue3实现的功能强大的在线海报设计器

项目介绍

在处理图片设计任务时，我们通常会选择使用诸如Photoshop（PS）之类的工具。然而，有时候我们想要快速完成任务，这时是否有一款工具能够支持快速生成海报呢？poster-design就是这样一款工具，它是一款漂亮且功能强大的在线海报设计器、图片编辑器，以及仿稿定设计工具。

适用于海报生成、电商产品图、文章长图、视频/公众号封面等多种场景。

poster-design基于Vue3 + Vite2 + Vuex + ElementPlus技术栈实现，利用Puppeteer + Express生成图片。

该项目具有丰富的基础功能，页面操作丝滑，交互细节丰富。它支持导入PSD文件解析成模板、在线导出图片下载。同时，它还具备如下功能特色：

• 元素拖拽、组合、缩放、层级调整、对齐等操作。
• 图片素材插入、替换、裁剪，图片容器等功能。
• SVG素材颜色、透明度编辑，文字花字组合。
• 画布自定义尺寸、滚轮缩放、自适应画布。
• 吸附对齐、辅助引导线、标尺功能。
• 键盘快捷键、右键菜单快捷操作，复制删除等常用操作。
• 风格二维码编辑，支持单色、渐变、自定义logo等。
• 图层操作，支持拖拽变更层级。
• 颜色调色板，原生级取色器颜色吸管（Chrome）。

项目地址

• GitHub: https://github.com/palxiao/poster-design
• 在线体验: https://design.palxp.cn/home

功能体验

1. 多种模板选择

2. 文字图层设计

3. 丰富的素材库

4. 多种多样的文字样式

5. 图片库

6. 工具箱

本地部署

1. 克隆代码

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

2. 安装依赖

<code>cd poster-design npm run prepared</code>

3. 启动服务

<code>npm run serve</code>

将会同时运行前端界面与图片生成服务（3000端口为前端项目，7001端口为图片生成服务）。

4. 浏览器访问

http://127.0.0.1:3000/

结语

推荐的开源项目已经收录到GitHub项目，欢迎Star：

• https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

• https://chencoding.top:8090/#/

通过poster-design，你可以快速轻松地完成各种海报设计和图片编辑任务，为你的创意增添色彩！