- Notifications
You must be signed in to change notification settings - Fork0
快图设计-基于fabric.js和Vue的开源图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
License
wuwenrui/vue-fabric-editor
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
English| 中文
基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键
快图设计,vue-fabric-editor 是一款基于 fabric.js 和 Vue 开发的图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。
- 插件化架构:可通过插件的进行扩展开发,支持右键菜单和快捷键。
- 拖拽式设计:以轻量、简洁为主的图形编辑器,而非大而全的在线 PS 类的重行设计工具。
- 功能完善:PSD 解析、辅助线、历史记录、渐变、自定义字体、裁剪等功能。
- 导入 JSON、PSD 文件
- 导出 PNG、SVG、JSON 文件
- 组合/拆分组合
- 图层功能
- 渐变属性
- 外观属性/字体属性/描边/阴影
- 撤销/重做
- 快捷键
- 右键菜单
- 辅助线
- 标尺
- 自定义字体
- 自定义模板素材
- 插入 SVG、图片素材
- 多元素水平、垂直对齐方式
- 背景属性设置
- 箭头/线条
- 画笔/多边形绘制
- 二维码/条形码
- 图片替换/裁剪/滤镜
- 水印
- 国际化
请先安装 node.js v18-v20,及 pnpm 8.4.0, 然后执行以下命令:
// 安装pnpmnpm install -g pnpm@8.4.0// 中国使用淘宝代理// npm install -g pnpm@8.4.0 --registry=https://registry.npmmirror.compnpm ipnpm dev
重要:必须使用pnpm 8.x,高版本pnpm会导致依赖不一致出现页面运行报错。
- 微信交流群:我们组建了多个微信项目交流群,作者和项目维护者活跃在群内,定期解答问题。
- fabric.js 中文教程:https://blog.kuaitu.cc。
- 知识星球:长期更新开源编辑器与 fabric.js 的相关资料,沉淀最佳实践、开发经验分享、代码示例等。

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

项目致力于打造一个开箱即用的 web 图片编辑器应用,同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。
如果你对这件事情感兴趣,真诚的邀请你加入,我们一起成长,你只要会简单的 Git 和 Javascript 语法就可以。
这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:
- 使用 fabric.js 快速开发一个图片编辑器,
- fabric.js 开发图片编辑器的细节实现
- fabric.js 开发图片编辑器可以实现哪些功能?多图
- 我的开源项目与开源经历分享
- Canvas 库 fabric.js 可以实现哪些功能? 动图介绍
- Vue 开源图片编辑器
- 个人开源项目商业化经验分享
- 开源 fabric.js 图片编辑器的插件化架构
注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧。



Licensed under theMIT License.
About
快图设计-基于fabric.js和Vue的开源图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- Vue45.1%
- TypeScript43.6%
- JavaScript8.6%
- Less1.6%
- CSS0.7%
- HTML0.3%
- Other0.1%

