English| 中文

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

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

演示 · 文档 · 商业版演示 · 商业版介绍 · 商品DIY设计器 · DIY产品介绍

简介

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

动图介绍 · 介绍视频

特点

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

已有功能

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

使用

请先安装 node.js v18-v20，及 pnpm 8.4.0， 然后执行以下命令：

// 安装pnpm
npm install -g pnpm@8.4.0

// 中国使用淘宝代理
// npm install -g pnpm@8.4.0 --registry=https://registry.npmmirror.com
pnpm i
pnpm dev

重要：必须使用pnpm 8.x，高版本pnpm会导致依赖不一致出现页面运行报错。

开发者服务

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

付费版本

帮助企业快速搭建在线设计工具，减少企业研发投入，避免重复造轮子。

功能介绍 · 产品介绍 · 演示

开源版本仅前端代码，付费版本提供完整的前后端、管理后台，功能完整开箱即用，提供源码授权、支持二次开发。

• 开箱即用，功能完整：设计能力丰富，提供完整前台、后台功能，部署即可使用。
• 插件架构，扩展方便：基于插件化 API，快速对编辑器进行二次开发。
• 批量生成，快速出图：支持通过 HTTP 接口、表格文件批量生成图片。
• 拖拽式设计，简单易用：适合普通用户操作，无需培训轻松上手。
• 全平台适配：PC 版本、H5 版本支持各种应用场景。
• 技术对接，文档培训：提供更多的支持，高效完成技术对接。
• 定制开发，减少投入：支持快速完成功能定制开发，减少研发投入。

商品/服装DIY设计器

商品DIY设计器 · DIY产品介绍

二次元设计器

吧唧/亚克力设计器 二次元自印小程序商城

电商平台DIY

定制开发案例

面料印花 丝巾设计试戴 工艺仿真 参数化盒型 各类DIY设计器

贡献指南

项目致力于打造一个开箱即用的 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设计编辑器的渐变组件。

友情赞助

管理员

贡献者

License

Licensed under the MIT License.