Vue 开源在线图片海报设计工具网站源码
基于 Canvas，复刻稿定设计，MIT 开源协议，可私有化部署、二次开发，支持伪原创改造利于搜索引擎收录GitHub
✨项目简介
一款美观、功能强大的在线设计工具，对标稿定设计。适用于海报制作、电商产品图、公众号封面、文章长图、短视频封面等场景。支持 PSD/PDF/SVG 导入还原，导出图片、SVG、PDF 文件，纯前端编辑器，可搭配后端扩展模板库、用户账号系统GitHub。
📋完整功能清单
基础操作功能
- 历史记录：撤销、重做，快速回退编辑步骤
- 快捷键：全套键盘快捷键，提升编辑效率
- 右键菜单：右键完成复制、删除、置顶置底等快捷操作
文件导入导出
- 导入
- PDF 导入：还原文档格式（不支持图片裁切导入）
- PSD 导入：还原图层格式，支持亮度、对比度、颜色覆盖等部分特效
- SVG 导入：兼容绝大多数 SVG 元素（tspan 字体不兼容）
- 导出：本地导出 PNG 图片、SVG 矢量图、PDF 文档
页面画布编辑
- 新增、删除页面，自由调整页面顺序
- 背景设置：纯色、渐变、图片背景
- 自定义画布尺寸，适配海报、封面、长图等各类尺寸
- 标尺工具、画布缩放、画布平移
- 吸附对齐，元素自动贴齐参考线
元素编辑能力
- 元素增加、删除、复制粘贴
- 拖拽移动、旋转、缩放
- 框选 / 点选多选，多元素组合 / 解组
- 层级调整：置顶、置底、上移、下移图层
文字编辑
文字颜色、高亮、字体切换、字号、加粗、斜体、下划线、删除线；文本对齐、项目符号、缩进、清除格式完整富文本能力。
图片处理
图片滤镜、着色蒙版、翻转、边框、阴影、裁切裁剪。
形状绘制
填充色、边框、阴影、透明度、翻转、形状内文字编辑。
线条绘制
自定义线条颜色、线条宽度、线条样式。
💡源码特色
- MIT 开源协议：允许商用、修改、二次开发，无版权约束GitHub
- 能力全面：海报、图片编辑一站式，覆盖新媒体绝大部分设计场景
- 多格式兼容：PSD/PDF/SVG 导入导出，打通本地设计文件
- 交互完善：历史回退、快捷键、右键菜单，贴近专业设计软件使用习惯
- 可扩展：可二次开发，接入模板库、用户系统、素材库、付费会员
- SEO 伪原创改造：修改页面标题、描述、页面文案、首页介绍，替换示例内容，利于搜索引擎收录
🛠技术栈
Vue3 + Vite + Fabric.js（Canvas 底层）+ TypeScript + Element‑Plus
⚙️部署运行环境
- Node.js 版本 ≥16
- 包管理器：pnpm
pnpm install #安装依赖
pnpm dev #本地调试
pnpm build #打包生产dist静态文件
打包完成 dist 文件夹可部署任意静态服务器 (Nginx、Caddy 等)，建议使用hash路由模式避免刷新 404 问题。
📌部署注意事项
- 跨域问题：导入外部图片、PSD 资源时会触发 Canvas 跨域污染，服务器需要配置资源跨域头。
- 字体问题：自定义字体需要服务器部署字体资源，否则部分字体渲染失效。
- SEO 提示：该项目是 Vue 单页应用 SPA，原生不利于 SEO；
- 方案 A：修改页面 TDK，增加预渲染（prerender‑spa‑plugin）做伪原创，提升搜索引擎收录。
- 方案 B：首页做静态 HTML 落地页，编辑器页面做 SPA，分离提升 SEO 表现。
- 仅前端版本不包含用户、模板存储后端；需要保存作品、模板库，需要自行开发配套 Node/PHP 后端。
36