这是一个创建于 607 天前的主题，其中的信息可能已经有所发展或是发生改变。
大家好，我是一位 93 年的前端开发者，最近开源了一款基于 Fabric.js + Vue3 开发的 Web 图形编辑器，它是一个可以自定义设计模板、设计素材，让开发者快捷的开发出一个图片编辑应用，类似稿定设计、创客贴设计这样的工具。
这篇笔记的两个目的：
- 介绍开源项目，如果有类似场景大家可直接使用，不再重复开发。
- 分享开源经历，鼓励和邀请对开源感兴趣的伙伴一起参与进来。
项目介绍
Github：https://github.com/nihaojob/vue-fabric-editor
预览：https://nihaojob.github.io/vue-fabric-editor/
技术选型：
项目以 Fabric.js 为底层，使用 Vue3 框架和精致的 View UI Plus 组件库构建。 Fabric.js 是业界知名的 Canvas 工具库，它已经 12 岁了，在业界得到了广泛的应用和认可； Vue 提供更友好的入门曲线，尤其在国内应用更广；希望借助这些优秀的开源项目，构建底层强大、上手容易、便捷扩展、开箱即用的开源图像编辑器产品。
应用场景
它适用于海报设计、封面设计、T 恤设计、奖状 /工卡设计、电子价签设计、印章设计、手机壁纸、PPT 设计等场景，还有更复杂的工业软件场景，如机房拓扑拓展、设备巡检图等。
产品特点
开源前做了一些调研，已经有一些比较专业的开源编辑器项目，比如知名的 SVGEdit 项目，它们很强大，类似在线版本的 PS ，提供给更专业的设计师使用；vue-fabric-editor 的产品定位是给非专业设计人员使用，例如让没有设计技能的运营同学在模板上简单修改，生成一张在公众号中使用的头图。
支持功能
- 支持导入导出 JSON 源文件，导出常见的图片 PNG 、SVG 格式。
- 可自定义设计模板、字体样式模板、自定义分类素材。
- 元素支持拖拽、组合、层级管理、多种对齐操作。
- 图片素材支持插入、替换、滤镜、裁剪。
- 支持形状素材、线条绘制，渐变、边框、透明度、阴影设置。
- 画布可自定义尺寸、放大缩小、辅助线、标尺功能。
- 快捷键、右键菜单快捷操作设置。
以上就是项目的介绍了，总结一下，它是一个基于 Fabric + Vue3 开发的一款开源 Web 图片编辑器，二次开发简单、扩展便捷、可帮助开发者快速构建一个面向非专业设计人员的图形编辑器。
开源经历
关于我
我曾就职于优信二手车，参与过低代码平台的开发，现在一家互联网保险公司工作，参与音视频营销工具、外呼系统的开发，都属于复杂度比较高的前端项目，一直对架构和开源比较感兴趣，也在学习和积累设计模式、架构设计、开源相关的经验。
作为一位已经 30 岁的开发者，一直对开源有着强烈的兴趣，但是从未参与过，于是在好奇心的驱动下发起了这个开源项目。
项目经历
最初，我帮朋友实现了一个基于 Fabric.js 开发的图片生成工具，后面将核心功能抽离并开源到了 Github 上，投稿到了阮一峰老师的博客，获得了一些关注。
Fabric.js 的底层能力非常强大，接口也很灵活，我最初以为只需要简单的 API 调用就可以实现一个图片编辑器，事实上我高估了自己的学习能力，也低估了 Fabric.js 的强大和灵活。
很多开发者反馈 Fabric.js 的文档不太友好，太过强大和灵活也有一个弊端，那就是细节太多，要实现一个基础功能完整、功能丰富的图编辑器应用并不轻松，要掌握很多的细节，做很多基础的封装工作。
我将开发过程发布到了技术社区，结识了很多 Fabric.js 的开发者。
短短几个月的时间，项目在 Github 上已经从 0 涨到 1K+ Star ，开源给我带来了新奇的体验。
沉淀
在和众多的开发者交流后，发现大家都在做同一件事情，重复的开发；大家更期望在不做太多基础工作的情况下，快速构建一个功能完整、易于扩展的图片编辑应用。
目前的项目还只是一个前端应用项目，希望未来和社区一起沉淀一个介于 Web 图片编辑器应用与 Fabric.js 底层库之间的封装层，面向应用开发者设计，提供更简单的接口，让开发者可以通过开源 SDK ，快速构建图片编辑器应用。
邀请
开源是很有魅力一件事情，我在 Github 上结识了很多志同道合的贡献者，他们是一个个富有热情且有执行力的有趣灵魂，是他们在深夜付出自己的时间与热爱为项目贡献代码，让不相识的后来人受益，让项目越来越好，我也从一个开源门外汉，和大家一起成为了开源贡献者。
这是一个很新的项目和社区，有太多的工作需要做，如果你对这件事情感兴趣，真诚的邀请你加入，希望我们一起边走边学，在未来一起成为开源世界里的一部分，期待你的加入。
 |
1
aulayli 2023-04-22 19:11:05 +08:00
很棒的项目，已 Star
|
 |
2
veike 2023-04-22 20:04:07 +08:00
已 star ，上次有个说自己是前端菜鸟的写的一个 html 编辑器开源项目，忘了地址了，有老哥记得告诉我一下。
|
 |
3
star7th 2023-04-22 20:06:52 +08:00  1
这篇文章写得好，把产品的来龙去脉都介绍得很清晰。虽然我目前用不上这类工具，但点个赞。
你考虑下要不要参考我的开源项目的模式，https://github.com/star7th/showdoc 开源跟 sass 服务 https://www.showdoc.com.cn 并行，这样可以一边做开源项目一边商业化，不然一直为爱发电，可能不好持续下去。相当多的开源项目都是死于付出和回报不成正比。假如走通商业化，反而走得更远。 比如说，你提供的 saas 服务可以多点模板，甚至可以引入 AI 来布局，等等。目前我觉得模板偏少，而需要这类工具的目标用户，往往比较需要现成的模板。 |
 |
4
EyreFree 2023-04-22 20:09:58 +08:00
👍
|
 |
5
Dlin 2023-04-22 20:47:37 +08:00
好东西加个 star
|
 |
9
nihaojob OP @star7th 感谢认可，看到你的开源项目很厉害，是有探索商业化的想法，应用型的开项目会有一些机会，想加老哥咨询请教，不知道方便吗？
|
|
10
star7th 2023-04-22 21:54:56 +08:00
@nihaojob 咱就萍水相逢好了。主要是我也不想手把手教人啊。如果你找得到一些对双方都有利的共赢方式，而不是单方面让我付出时间精力，就联系我邮箱吧。在 github 主页能找到我邮箱。
|
 |
11
ShareManT 2023-04-22 22:30:02 +08:00
很棒
|
 |
14
bojue 2023-04-23 01:30:28 +08:00
@nihaojob 其实开源+商业化可以参考 dooring 这款挺成功的产品，完全商业话可以参考：创客贴，canva ，稿定设计，客户确实比较看中模板库
|
|
15
nihaojob OP @bojue 我之前也关注到了徐小夕大佬的 dooring ，目前项目还比较初期，在考虑这个事情了，感谢提醒
|
 |
17
coldmonkeybit 2023-04-23 09:26:04 +08:00
支持支持已 star ，上个月用 fabric 做需求，还参考过 OP 的项目，太巧啦
|
 |
18
sunny7 2023-04-23 10:40:24 +08:00
已 star,大佬,我是一名有两年正式开发经验的前端开发,对这个项目很感兴趣,请问可以怎么加入这个开源项目
|
 |
19
onetown 2023-04-23 10:41:30 +08:00 1
已 star
|
 |
20
seanlin5 2023-04-23 11:23:57 +08:00
已 star
|
|
21
nihaojob OP @sunny7 太好了 欢迎你加入，可以看下 github 上 reademe 的贡献指南，有我的微信
|
|
22
nihaojob OP @coldmonkeybit 缘分 哈哈
|
 |
23
aegon466 2023-04-23 17:57:42 +08:00
可以支持 3d 吗
|
 |
27
VikiQAQ 2023-05-05 16:46:17 +08:00
感谢每一位开源贡献者。
|
 |
28
qalong 2023-05-11 21:19:26 +08:00
用过，很不错！特意表示感谢！
|
Select Language