源码简介

Vue 开源在线图片海报设计工具网站源码一款基于 Vue 的强大在线设计工具，助您轻松打造精美设计！

功能特性

设计类型广泛: 涵盖海报设计、电商产品图制作、文章长图设计、视频/公众号封面编辑等多种场景

• 文件格式支持丰富:
  • 导入: PSD (支持部分特效还原)、PDF、SVG
  • 导出: 图片、SVG、PDF
• 编辑功能强大:
  • 页面管理: 添加/删除页面、调整页面顺序、设置背景 (纯色、渐变、图片)、自定义画布尺寸。
  • 元素操作: 添加/删除元素、复制粘贴、拖拽移动、旋转缩放、多选组合、吸附对齐、调整层级关系。
  • 文本编辑: 丰富文本样式选项，包括颜色、字体、字号、加粗、斜体、下划线、删除线、对齐方式、项目符号、缩进等。
  • 图片处理: 支持滤镜、着色、翻转、边框、阴影、裁切等操作。
  • 形状绘制: 提供填充色、边框、阴影、透明度、翻转、编辑文字等功能。
  • 线条绘制: 可选择颜色、宽度、样式。
• 用户体验友好:
  • 历史记录: 支持撤销与重做操作，方便修改。
  • 快捷键: 提供多种快捷键，提升操作效率。
  • 右键菜单: 为用户提供便捷的操作选项。
• 源码优势:
  • 开源: 遵循 MIT License，可自由使用和修改。
  • 功能强大: 集成了海报设计、图片编辑等多种功能，满足多样化需求。
  • 扩展性强: 未来将支持更多功能，如 cdr 解析。

应用场景:

• 个人和企业用户进行在线图片编辑和海报设计。
• 电商卖家制作产品主图、详情页等。
• 自媒体用户设计文章长图、视频封面等。

其他说明:

本源码基于 Canvas 开发，提供了强大的图像处理能力，并适配稿定设计 pdf 还原功能，能够为您带来高效便捷的设计体验。

关键词: Vue, 开源, 在线设计工具, 海报设计, 图片编辑, Canvas, 稿定设计, PSD, PDF, SVG, 电商, 自媒体, MIT License

演示截图

项目运行

node >= 16+
pnpm install  // 安装依赖
pnpm dev      // debug
pnpm build    // prod

📖 项目结构

├── app                           // 静态资源
│   ├── fabricCanvas              // FabricCanvas
│   ├── fabricControls            // 选择器
│   ├── fabricRuler               // 标尺
│   ├── fabricTool                // 拖动
│   ├── guideLines                // 辅助线
│   ├── hoverBorders              // 预选择
│   └── wheelScroll               // 缩放
├── assets                        // 静态资源
│   ├── fonts                     // 在线字体文件
│   └── styles                    // 样式
├── components                    // 与业务逻辑无关的通用组件
├── configs                       // 配置文件，如：颜色，字体。
├── hooks                         // 供多个组件 （模块） 使用的 hooks 方法
├── extension                     // 自定义 fabirc 对象
│   ├── controls                  // 裁剪图片 controls
│   ├── mixins                    // 裁剪图片 mixins
│   └── object                    // 自定义元素对象
├── mocks                         // mocks 数据
├── plugins                       // 自定义的 Vue 插件
├── types                         // 类型定义文件
├── store                         // Pinia store，参考：https://pinia.vuejs.org/
├── utils                         // 通用的工具方法
├── views                         // 业务组件目录。
│    ├── Canvas                   // 编辑器对象
│    └── Editor                   // 编辑器模块
└── worker                        // web worker

🧾 API 接口文档

使用后端文件解析器可以查看如下

• 支持 pdf
• 支持 psd
• 支持 ai(pdf 结构)
• 支持抠图
• cdr 解析开发中

📚 功能列表

基础功能

• 历史记录 （撤销、重做）
• 快捷键
• 右键菜单
• 导入 PDF(完美还原格式，不支持图片裁切导入)
• 导入 PSD(完美还原格式，支持部分特效还原，亮度，对比度，颜色覆盖)
• 导入 SVG(不支持 tspan 字体)
• 导出本地文件 （SVG、图片、PDF）

页面编辑

• 页面添加、删除
• 页面顺序调整
• 页面复制粘贴 (TODO)
• 背景设置 （纯色、渐变、图片）
• 设置画布尺寸
• 网格线 (TODO)
• 标尺
• 画布缩放、移动
• 页面模板
• 选择面板 （隐藏元素、层级排序、元素命名）(TODO)

元素编辑

• 元素添加、删除
• 元素复制粘贴
• 元素拖拽移动
• 元素旋转
• 元素缩放
• 元素多选 （框选、点选）
• 多元素组合
• 多元素批量编辑 (TODO)
• 元素锁定 (TODO)
• 元素吸附对齐 （移动和缩放）
• 元素层级调整
• 元素对齐到画布
• 元素坐标、尺寸和旋转角度设置

文字

• 文本编辑 （颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、对齐方式、项目符号、缩进、清除格式）
• 行高
• 字间距
• 段间距
• 填充色
• 阴影
• 透明度

图片

• 滤镜
• 着色 （蒙版）
• 翻转
• 边框
• 阴影
• 裁切

形状

• 填充色
• 边框
• 阴影
• 透明度
• 翻转
• 编辑文字

线条

• 颜色
• 宽度
• 样式