开源图片编辑器 · 插件化架构 · 拖拽式设计 · 功能完善

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

演示 · 文档 · 付费版演示 · 付费版介绍

简介

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

动图介绍 · 介绍视频

特点

1. 插件化架构：可通过插件的进行扩展开发，支持右键菜单和快捷键。
2. 拖住式设计：以轻量、简洁为主的图形编辑器，而非大而全的在线 PS 类的重行设计工具。
3. 功能完善：PSD解析、辅助线、历史记录、渐变、自定义字体、裁剪等功能。

已有功能

• 导入 JSON、PSD 文件
• 导出 PNG、SVG、JSON 文件
• 组合/拆分组合
• 图层功能
• 渐变属性
• 外观属性/字体属性/描边/阴影
• 撤销/重做
• 快捷键
• 右键菜单
• 辅助线
• 标尺
• 自定义字体
• 自定义模板素材
• 插入 SVG、图片素材
• 多元素水平、垂直对齐方式
• 背景属性设置
• 箭头/线条
• 画笔/多边形绘制
• 二维码/条形码
• 图片替换/裁剪/滤镜
• 水印
• 国际化

使用

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

pnpm i
pnpm dev

开发者服务

• 微信交流群：我们组建了多个微信项目交流群，作者和项目维护者活跃在群内，定期解答问题。
• 知识星球：长期更新开源编辑器与fabric.js的相关资料，沉淀最佳实践、开发经验分享、代码示例等。

付费版本

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

• 素材管理后台：可对编辑器中的字体、模板、图片素材进行便捷操作管理。
• 批量导入：字体文件、素材、PSD 模板批量导入到后台系统。
• 用户管理：支持登录/注册，用户账号禁用启用。
• 用户素材：图片素材、用户模板。
• HTTP 接口对接：微信、短信登录，API 接口登录，支持多种形式对接。
• 批量图片生成：可根据模板 + 内容，批量生成创意图片。
• 批量 AI 抠图：提供一定数量级的免费抠图服务。

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

贡献指南

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

如果你对这件事情感兴趣，真诚的邀请你加入，我们一起成长，你只要会简单的 Git 和 Javascript 语法就可以。

相关资料

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

1. 使用 fabric.js 快速开发一个图片编辑器，
2. fabric.js 开发图片编辑器的细节实现
3. fabric.js开发图片编辑器可以实现哪些功能？多图
4. 我的开源项目与开源经历分享
5. Canvas库 fabric.js可以实现哪些功能？ 动图介绍
6. Vue开源图片编辑器
7. 个人开源项目商业化经验分享
8. 开源fabric.js图片编辑器的插件化架构

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

致谢

• 刘明野标尺功能作者。
• palxiao设计编辑器的渐变组件。

管理员

nihaojob

Qiu-Jun(求职,求内推)

wuchenguang1998

贡献者

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

License

Licensed under the MIT License.