文档 | English | 中文

vue-fabric-editor

基于 fabric.js 和 Vue 开发的插件化图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。

• 预览
• Gitee 预览

特点

1. 插件化架构：可自定义素材、右键菜单、快捷键等功能，易扩展。
2. 简洁易用：以轻量、简洁为主的图形编辑器，而非大而全的在线 PS 类的重行设计工具。
3. 功能齐全：自定义模板、渐变、自定义字体等功能，满足轻量图片编辑场景。

已有功能

功能介绍文章 文字 + 动图。

• 导入 JSON 文件
• 保存为 PNG、SVG、JSON 文件
• 插入 SVG、图片文件
• 多元素水平、垂直对齐方式
• 字体模板
• 组合/拆分组合
• 图层及顺序调整
• 撤销/重做
• 背景属性设置
• 外观属性/字体属性/描边/阴影
• 自定义字体
• 自定义模板素材
• 快捷键
• 右键菜单
• 辅助线
• 标尺
• 图片替换
• 图片滤镜
• 国际化

使用

启动项目

请先安装 node.js v16，及 pnpm， 然后执行以下命令：

pnpm i
pnpm dev

自定义素材

可自定义字体、设计模板、标题模板等，你也可以购买我整理好的字体文件 + 字体文件生成预览图片的示例代码，购买链接。

开发者服务

• 微信交流群：我们组建了 450+人的微信项目交流群，作者和项目维护者活跃在群内，定期解答问题。
• 知识星球：沉淀高质量常见问题、最佳实践文档，如跨域、部署、字体素材等问题，长期更新围绕在开源编辑器、fabric.js 的相关资料。
• 付费咨询：提供 200 元/小时的咨询服务，帮你快速解决项目中遇到的问题。
• fabric.js 代码示例：查看。
• 视频教程：《fabric.js 入门教程》、《使用 fabric.js 从 0 到 1 构建图片编辑器》、《vue-fabric-editor 开发实践》。

付费版本

开源版本仅前端代码，付费版本提供完整的前后端服务，无须任何开发，2999 元提供前后端源码，支持 Docker 部署，包括功能：

• 素材管理后台：可对编辑器中的字体、模板、图片素材进行便捷操作管理。
• 用户管理：支持登录/注册，用户账号禁用启用。
• 用户素材：图片素材、用户模板。
• HTTP 接口服务：可通过接口对系统内的用户、素材进行管理。
• 批量图片生成：可根据模板 + 内容，批量生成创意图片。

我们致力于帮助企业快速、低成本构建图片编辑应用，支持定制开发，欢迎与我们联系。

贡献指南

项目致力于打造一个开箱即用的 web 图片编辑器应用，同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层，期望封装层面向开发者设计，提供更简单的接口，让开发者可以轻松的实现图片应用开发。

我们离目标还有很长的距离，如果你对这件事情感兴趣，真诚的邀请你加入，我们一起沉淀 fabric.js 的最佳实践，你会得到包括不限于以下列表的收获，你只要会简单的 Git 和 Javascript 语法就可以。

• 熟悉开源协作方式，成为项目贡献者。
• Vue3 + TS 实践，边学边开发。
• fabric.js 开发，边学边开发。
• 入门单元测试，边学边开发。
• 众多的 fabric.js 开发者交流。
• 图形编辑器架构经验。

目前有很多需要做的工作，比如英文文档的搭建、SDK 拆分等，欢迎与我联系，我愿意与你进行任何问题的交流，微信：13146890191。期待你的 issue 和 PR 。

这是我发表在掘金社区关于编辑器的技术笔记，会有更多的细节：

1. 使用 fabric.js 快速开发一个图片编辑器，
2. fabric.js 开发图片编辑器的细节实现

注：如果遇到技术问题，期望使用 issue 讨论，它更加开放与透明，足够多的信息会让解决问题变得更高效，参考提问的智慧。

规划

可能新增功能

第一阶段

• 缩放
• 三角形、箭头、线条
• 复制 粘贴 快捷键
• 拖动模式，放大缩小
• 画布大小保存
• 绘制线条
• svgIcon 汇总
• 标题样式列表模板
• 预览

第二阶段

• 图片替换
• 渐变配置
• 平铺背景、等比例背景
• 图片裁剪
• 滤镜
• 描边 strokeDashArray

第三阶段

• monorepo 升级 进行中
• 插件化
• 标尺插件
• 截图插件
• 滤镜插件
• 画布插件
• 其他工具函数
• @fabricEditor SDK 封装
• 基于插件开发移动端
• 基于插件开发其他图片应用
• 文档建设(中英文)

致谢

• color-gradient-picker-vue3 一个 vue3 版本的渐变组件，作者Qiu-Jun 。
• 标尺功能作者刘明野。

贡献者

nihaojob	Qiu-Jun	wuchenguang1998	ylx252	AliceLanniste	liumingye
bigFace2019	wohuweixiya	z09176141	makeng	hudenghui	JiangShuQ
ijry	briver0825	a847244052	zjc2233	ddshiyu	yehan68
luke358	xiaozeo	x007xyz	wozhi-cl	vvbear	slarkerino
rolitter	macheteHot	jooyyy	nanfb	dulltackle	Bamzc
Yangzongtai	Alicehhhmm	icleitoncosta	liucity

License

Licensed under the MIT License.