项目简介
本项目是一款基于Vue3和ElementPlus框架构建的在线海报设计工具,适用于多种设计场景,如海报图片生成、电商分享图、文章长图、视频/公众号封面等,为用户提供功能强大且操作简便的海报设计体验。
项目的主要特性和功能
- 丝滑的操作体验,具备丰富交互细节与完善基础功能,设计过程流畅。
- 服务端生成图片,保证多端出图一致,支持各种CSS特性。
- 拥有简易的AI抠图功能,上传图片可一键去除背景。
- 支持PSD文件导入解析成模板,还能在线导出图片下载。
- 元素操作多样,包括拖拽、组合、缩放、层级调整、对齐等。
- 可对图片素材进行插入、替换、裁剪操作,具备图片容器功能。
- 支持SVG素材的颜色、透明度编辑,以及文字花字组合。
- 画布可自定义尺寸、滚轮缩放、自适应。
- 提供吸附对齐、辅助引导线、标尺等辅助工具。
- 支持键盘快捷键与右键菜单快捷操作。
- 支持单色、渐变、自定义logo等风格的二维码编辑。
安装使用步骤
1. 拉取源码
推荐使用 Node.js v16.18 以上版本。
bash
cd poster-design
2. 安装依赖
bash
npm run prepared
若网络较慢,可更改 npm 仓库源为国内镜像源后再安装。
3. 本地运行
bash
npm run serve
运行后,前端界面和图片生成服务将同时启动。前端界面可通过访问 http://127.0.0.1:3000/
查看,图片生成服务端口为 7001
。
4. 打包部署
- 前端页面打包:使用
npm run v-build
命令。 - 截图服务打包:查看
/screenshot
目录下的 README 文件。
5. 服务端部署
根据具体场景自行实现后端接口,参考 API 文档 进行接口对接。
6. 抠图服务部署
通过 Docker 部署抠图服务:
bash
docker run -d -p 5000:5000 --restart always danielgatis/rembg s
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】