[English](https://github.com/ikuaitu/vue-fabric-editor/blob/main/README-en.md)| 中文

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

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

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

## 简介快图设计，vue-fabric-editor 是一款基于 fabric.js 和 Vue 开发的图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。 [动图介绍](https://juejin.cn/post/7222141882515128375) · [介绍视频](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0) ### 特点 1. **插件化架构**：可通过插件的进行扩展开发，支持右键菜单和快捷键。 2. **拖拽式设计**：以轻量、简洁为主的图形编辑器，而非大而全的在线 PS 类的重行设计工具。 3. **功能完善**：PSD 解析、辅助线、历史记录、渐变、自定义字体、裁剪等功能。 ### 已有功能 - 导入 JSON、PSD 文件 - 导出 PNG、SVG、JSON 文件 - 组合/拆分组合 - 图层功能 - 渐变属性 - 外观属性/字体属性/描边/阴影 - 撤销/重做 - 快捷键 - 右键菜单 - 辅助线 - 标尺 - 自定义字体 - 自定义模板素材 - 插入 SVG、图片素材 - 多元素水平、垂直对齐方式 - 背景属性设置 - 箭头/线条 - 画笔/多边形绘制 - 二维码/条形码 - 图片替换/裁剪/滤镜 - 水印 - 国际化 ## 使用请先安装 node.js v18-v20，及 pnpm 8.4.0，然后执行以下命令： ```shell // 安装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](https://blog.kuaitu.cc/)。 - **知识星球**：长期更新开源编辑器与 fabric.js 的相关资料，沉淀最佳实践、开发经验分享、代码示例等。二维码

## 付费版本帮助企业快速搭建在线设计工具，**减少企业研发投入，避免重复造轮子。** [功能介绍](https://ws0gdejldw.feishu.cn/docx/GKmnddCgFokr4sxFeYNcoql1nAb) · [产品介绍](http://pro.kuaitu.cc/) · [演示](https://www.kuaitu.cc/) 开源版本仅前端代码，付费版本**提供完整的前后端、管理后台，功能完整开箱即用，提供源码授权、支持二次开发**。 - **开箱即用，功能完整**：设计能力丰富，提供完整前台、后台功能，部署即可使用。 - **插件架构，扩展方便**：基于插件化 API，快速对编辑器进行二次开发。 - **批量生成，快速出图**：支持通过 HTTP 接口、表格文件批量生成图片。 - **拖拽式设计，简单易用**：适合普通用户操作，无需培训轻松上手。 - **全平台适配**：PC 版本、H5 版本支持各种应用场景。 - **技术对接，文档培训**：提供更多的支持，高效完成技术对接。 - **定制开发，减少投入**：支持快速完成功能定制开发，减少研发投入。

## 商品/服装DIY设计器商品DIY设计器 · DIY产品介绍

![image](https://github.com/user-attachments/assets/c00fcf50-4a71-4d0a-8f3c-78ac45324672) ## 二次元设计器吧唧/亚克力设计器二次元自印小程序商城 ![20251103174139](https://github.com/user-attachments/assets/fbad98cb-24ff-431d-b4b7-314a4e1360e3)

电商平台DIY

## 定制开发案例面料印花

丝巾设计试戴

工艺仿真

参数化盒型

各类DIY设计器

## 贡献指南项目致力于打造一个开箱即用的 web 图片编辑器应用，同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层，期望封装层面向开发者设计，提供更简单的接口，让开发者可以轻松的实现图片应用开发。如果你对这件事情感兴趣，真诚的邀请你加入，我们一起成长，你只要会简单的 Git 和 Javascript 语法就可以。 [【提交代码送赢雷蛇游戏鼠标】](https://github.com/ikuaitu/vue-fabric-editor/issues/526) ### 相关资料这是我发表在掘金社区关于编辑器的技术笔记，会有更多的细节： 1. [使用 fabric.js 快速开发一个图片编辑器](https://juejin.cn/post/7155040639497797645)， 2. [fabric.js 开发图片编辑器的细节实现](https://juejin.cn/post/7199849226745430076) 3. [fabric.js 开发图片编辑器可以实现哪些功能？多图](https://juejin.cn/post/7222141882515128375) 4. [我的开源项目与开源经历分享](https://juejin.cn/post/7224765991896121401) 5. [Canvas 库 fabric.js 可以实现哪些功能？动图介绍](https://juejin.cn/post/7336743827827015731) 6. [Vue 开源图片编辑器](https://juejin.cn/post/7384258569590636595) 7. [个人开源项目商业化经验分享](https://juejin.cn/post/7400687574967271478) 8. [开源 fabric.js 图片编辑器的插件化架构](https://juejin.cn/post/7401071861847949339) 注：如果遇到技术问题，期望使用 issue 讨论，它更加开放与透明，足够多的信息会让解决问题变得更高效，参考[提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7)。 ## 致谢 - [刘明野](https://github.com/liumingye)标尺功能作者。 - [palxiao](https://github.com/palxiao/poster-design/tree/main/packages/color-picker)设计编辑器的渐变组件。 ## 友情赞助

## 管理员 ## 贡献者

_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) License.