一款基于Vue3实现的漂亮且功能强大的在线海报设计器

大家好,我是 Java陈序员

我们在工作中经常需要设计各种各样的图片,海报、产品图、文章图片、视频/公众号等。

我们可以选择使用 PS 来设计图片,但是有时候想快速完成任务,有没有一款工具支持快速生成海报呢?

答案是有的,今天给大家介绍一款在线图片(海报)设计器

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

poster-design ------ 一款漂亮且功能强大的在线海报设计器、图片编辑器、仿稿定设计。

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

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

poster-design 具有完善的基础功能,页面操作丝滑,交互细节丰富。使用服务端生成图片,支持简单的 AI 抠图工具,可一键去除图片背景。

功能特色:

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

项目地址:

bash 复制代码
https://github.com/palxiao/poster-design

在线体验:

bash 复制代码
https://design.palxp.cn/home

功能体验

1、多种模板选择

2、文字图层设计

3、丰富的素材库

4、多种多样的文字样式

5、图片库

6、工具箱

本地部署

1、克隆代码

bash 复制代码
git clone https://github.com/palxiao/poster-design.git

2、安装依赖

bash 复制代码
cd poster-design
npm run prepared

3、启动服务

bash 复制代码
npm run serve

将会同时运行前端界面与图片生成服务(3000端口为前端项目,7001端口为图片生成服务)

4、浏览器访问

bash 复制代码
http://127.0.0.1:3000/ 

最后

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

bash 复制代码
https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

bash 复制代码
https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

相关推荐
一道雷5 小时前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·vue.js·前端框架
bug总结5 小时前
uniapp+动态设置顶部导航栏使用详解
java·前端·javascript
晴殇i5 小时前
深入理解MessageChannel:JS双向通信的高效解决方案
前端·javascript·程序员
毕设十刻5 小时前
基于Vue的民宿管理系统st4rf(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
kkkAloha5 小时前
倒计时 | setInterval
前端·javascript·vue.js
源猿人5 小时前
使用 Node.js 批量下载全国行政区 GeoJSON(含省级 + 地级市)
node.js
云轩奕鹤6 小时前
智析单词书 - AI 驱动的深度英语词汇学习平台
前端·ai·产品·思维
逆光如雪6 小时前
控制台快速查看自己的log,提高开发效率
前端
用户47949283569156 小时前
年薪百万的 React 功底怎么“装进”AI?Vercel 的这个 Skill 给了标准答案
前端·aigc·ai编程
jason_yang6 小时前
这5年在掘金的感想
前端·javascript·vue.js