当前位置:首页 > 技术分析 > 正文内容

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

ruisui881个月前 (03-30)技术分析14

大家好,我是 Java陈序员。

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

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

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

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

项目介绍

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

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

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

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

功能特色:

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

项目地址:

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

在线体验:

https://design.palxp.cn/home

功能体验

1、多种模板选择

2、文字图层设计

3、丰富的素材库

4、多种多样的文字样式

5、图片库

6、工具箱

本地部署

1、克隆代码

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

2、安装依赖

cd poster-design
npm run prepared

3、启动服务

npm run serve

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

4、浏览器访问

http://127.0.0.1:3000/ 

最后

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

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

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

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

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3169.html

标签: vite svg
分享给朋友:

“一款基于Vue3实现的漂亮且功能强大的在线海报设计器” 的相关文章

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

VIM配置整理

一、基本配色set number set showcmd set incsearch set expandtab set showcmd set history=400 set autoread set ffs=unix,mac,dos set hlsearch set shiftwidth=2 s...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版,现已在其安卓应用中可用,之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器,用户可以在设置中选择不同模型,包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒,2.0...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出 JavaScript 中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可以像这样得到数组的长度:const arr = [1, 2, 3]; console.log(a...