English| 中文
基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键
快图设计,vue-fabric-editor 是一款基于 fabric.js 和 Vue 开发的图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。
- 插件化架构:可通过插件的进行扩展开发,支持右键菜单和快捷键。
- 拖拽式设计:以轻量、简洁为主的图形编辑器,而非大而全的在线 PS 类的重行设计工具。
- 功能完善:PSD解析、辅助线、历史记录、渐变、自定义字体、裁剪等功能。
- 导入 JSON、PSD 文件
- 导出 PNG、SVG、JSON 文件
- 组合/拆分组合
- 图层功能
- 渐变属性
- 外观属性/字体属性/描边/阴影
- 撤销/重做
- 快捷键
- 右键菜单
- 辅助线
- 标尺
- 自定义字体
- 自定义模板素材
- 插入 SVG、图片素材
- 多元素水平、垂直对齐方式
- 背景属性设置
- 箭头/线条
- 画笔/多边形绘制
- 二维码/条形码
- 图片替换/裁剪/滤镜
- 水印
- 国际化
请先安装 node.js v16,及 pnpm, 然后执行以下命令:
pnpm i
pnpm dev
- 微信交流群:我们组建了多个微信项目交流群,作者和项目维护者活跃在群内,定期解答问题。
- 知识星球:长期更新开源编辑器与fabric.js的相关资料,沉淀最佳实践、开发经验分享、代码示例等。
![二维码](https://private-user-images.githubusercontent.com/13534626/320255466-25e9075e-f751-4110-aadd-30fe453e02d9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NDQ3NDEsIm5iZiI6MTcyNDU0NDQ0MSwicGF0aCI6Ii8xMzUzNDYyNi8zMjAyNTU0NjYtMjVlOTA3NWUtZjc1MS00MTEwLWFhZGQtMzBmZTQ1M2UwMmQ5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAwMDcyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0MjVkOTc3M2M2ODEzMWQ4N2U3NThmOTllMGZiYWEyNGE1OWFmMDkyNWNmMDUwYzZhNGU5OGJkYTRlZWQxNTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._kb-KzE676ltmaG0WvX3lpXkBmHgNBmkNcUghjs-awE)
帮助企业快速搭建在线设计工具,减少企业研发投入,避免重复造轮子。
开源版本仅前端代码,付费版本提供完整的前后端、管理后台,功能完整开箱即用,提供源码授权、支持二次开发。
- 开箱即用,功能完整:设计能力丰富,提供完整前台、后台功能,部署即可使用。
- 插件架构,扩展方便:基于插件化API,快速对编辑器进行二次开发。
- 批量生成,快速出图:支持通过HTTP接口、表格文件批量生成图片。
- 拖拽式设计,简单易用:适合普通用户操作,无需培训轻松上手。
- 技术对接,文档培训:提供更多的支持,高效完成技术对接。
- 定制开发,减少投入:支持快速完成功能定制开发,减少研发投入。
![开源图片编辑器](https://private-user-images.githubusercontent.com/13534626/358521113-5303395b-247d-45be-a411-ef27a389156c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NDQ3NDEsIm5iZiI6MTcyNDU0NDQ0MSwicGF0aCI6Ii8xMzUzNDYyNi8zNTg1MjExMTMtNTMwMzM5NWItMjQ3ZC00NWJlLWE0MTEtZWYyN2EzODkxNTZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAwMDcyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlmZjE2NmQ2YzE3MTkzZWU2ZDEyY2Q1ZWQ1ZmEzZTIyZjhhYjc4NWJlYjFiNWNkMDUwNjlkMjBkN2VkZTU1NTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.TaNgMGqUGyA3wFQ0Cn3RG7h1SH7k2yIgXz-fS4I3IJE)
项目致力于打造一个开箱即用的 web 图片编辑器应用,同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。
如果你对这件事情感兴趣,真诚的邀请你加入,我们一起成长,你只要会简单的 Git 和 Javascript 语法就可以。
这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:
- 使用 fabric.js 快速开发一个图片编辑器,
- fabric.js 开发图片编辑器的细节实现
- fabric.js开发图片编辑器可以实现哪些功能?多图
- 我的开源项目与开源经历分享
- Canvas库 fabric.js可以实现哪些功能? 动图介绍
- Vue开源图片编辑器
- 个人开源项目商业化经验分享
- 开源fabric.js图片编辑器的插件化架构
注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧。
nihaojob |
Qiu-Jun(求职,求内推) |
wuchenguang1998 |
Licensed under the MIT License.