基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。
- 插件化架构:可自定义素材、右键菜单、快捷键等功能,易扩展。
- 简洁易用:以轻量、简洁为主的图形编辑器,而非大而全的在线 PS 类的重行设计工具。
- 功能齐全:自定义模板、渐变、自定义字体等功能,满足轻量图片编辑场景。
功能介绍文章 文字 + 动图。
- 导入 JSON、PSD 文件
- 保存为 PNG、SVG、JSON 文件
- 插入 SVG、图片文件
- 多元素水平、垂直对齐方式
- 字体模板
- 组合/拆分组合
- 图层及顺序调整
- 撤销/重做
- 背景属性设置
- 外观属性/字体属性/描边/阴影
- 自定义字体
- 自定义模板素材
- 快捷键
- 右键菜单
- 辅助线
- 标尺
- 图片替换
- 图片滤镜
- 国际化
请先安装 node.js v16,及 pnpm, 然后执行以下命令:
pnpm i
pnpm dev
可自定义字体、设计模板、标题模板等,你也可以购买我整理好的字体文件 + 字体文件生成预览图片的示例代码,购买链接。
- 微信交流群:我们组建了 450+人的微信项目交流群,作者和项目维护者活跃在群内,定期解答问题。
- 知识星球:沉淀高质量常见问题、最佳实践文档,如跨域、部署、字体素材等问题,长期更新围绕在开源编辑器、fabric.js 的相关资料。
- 付费咨询:提供 200 元/小时的咨询服务,帮你快速解决项目中遇到的问题。
- fabric.js 代码示例:查看。
- 视频教程:《fabric.js 入门教程》、《使用 fabric.js 从 0 到 1 构建图片编辑器》、《vue-fabric-editor 开发实践》。
开源版本仅前端代码,付费版本提供完整的前后端服务,开箱即用,无须任何开发,支持 Docker 部署,包括功能:
- 素材管理后台:可对编辑器中的字体、模板、图片素材进行便捷操作管理。
- 批量导入:字体文件、素材、PSD模板批量导入到后台系统。
- 用户管理:支持登录/注册,用户账号禁用启用。
- 用户素材:图片素材、用户模板。
- HTTP接口对接:微信、短信登录,API接口登录,支持多种形式对接。
- 批量图片生成:可根据模板 + 内容,批量生成创意图片。
- 批量AI抠图:提供一定数量级的免费抠图服务。
我们致力于帮助企业快速、低成本构建图片编辑应用,支持定制开发,欢迎与我们联系。
项目致力于打造一个开箱即用的 web 图片编辑器应用,同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。
我们离目标还有很长的距离,如果你对这件事情感兴趣,真诚的邀请你加入,我们一起沉淀 fabric.js 的最佳实践,你会得到包括不限于以下列表的收获,你只要会简单的 Git 和 Javascript 语法就可以。
- 熟悉开源协作方式,成为项目贡献者。
- Vue3 + TS 实践,边学边开发。
- fabric.js 开发,边学边开发。
- 入门单元测试,边学边开发。
- 众多的 fabric.js 开发者交流。
- 图形编辑器架构经验。
目前有很多需要做的工作,比如英文文档的搭建、SDK 拆分等,欢迎与我联系,我愿意与你进行任何问题的交流,微信:13146890191。期待你的 issue 和 PR 。
这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:
注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧。
第一阶段
- 缩放
- 三角形、箭头、线条
- 复制 粘贴 快捷键
- 拖动模式,放大缩小
- 画布大小保存
- 绘制线条
- svgIcon 汇总
- 标题样式列表模板
- 预览
第二阶段
- 图片替换
- 渐变配置
- 平铺背景、等比例背景
- 图片裁剪
- 滤镜
- 描边 strokeDashArray
第三阶段
- monorepo 升级 进行中
- 插件化
- 标尺插件
- PSD导入插件
- 截图插件
- 滤镜插件
- 画布插件
- 其他工具函数
- @fabricEditor SDK 封装
- 基于插件开发移动端
- 基于插件开发其他图片应用
- 文档建设(中英文)
- color-gradient-picker-vue3 一个 vue3 版本的渐变组件,作者Qiu-Jun 。
- 刘明野标尺功能作者。
- palxiao设计编辑器的渐变组件。
nihaojob |
Qiu-Jun |
wuchenguang1998 |
Licensed under the MIT License.