头图

大家好,我是一位93年的前端开发者,最近开源了一款基于Fabric.js + Vue3 开发的Web图形编辑器,它是一个可以自定义设计模板、设计素材,让开发者快捷的开发出一个图片编辑应用,类似稿定设计、创客贴设计这样的工具。

这篇笔记的两个目的:

  1. 介绍开源项目,如果有类似场景大家可直接使用,不再重复开发。
  2. 分享开源经历,鼓励和邀请对开源感兴趣的伙伴一起参与进来。

    项目介绍

    screenshot-20230415-142257.png

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设计等场景,还有更复杂的工业软件场景,如机房拓扑拓展、设备巡检图等。
image.png
image.png

产品特点

开源前做了一些调研,已经有一些比较专业的开源编辑器项目,比如知名的SVGEdit项目,它们很强大,类似在线版本的PS,提供给更专业的设计师使用;vue-fabric-editor的产品定位是给非专业设计人员使用,例如让没有设计技能的运营同学在模板上简单修改,生成一张在公众号中使用的头图。
image.png

支持功能

  1. 支持导入导出JSON源文件,导出常见的图片PNG、SVG格式。
  2. 可自定义设计模板、字体样式模板、自定义分类素材。
  3. 元素支持拖拽、组合、层级管理、多种对齐操作。
  4. 图片素材支持插入、替换、滤镜、裁剪。
  5. 支持形状素材、线条绘制,渐变、边框、透明度、阴影设置。
  6. 画布可自定义尺寸、放大缩小、辅助线、标尺功能。
  7. 快捷键、右键菜单快捷操作设置。

20230422131548_rec_.gif

以上就是项目的介绍了,总结一下,它是一个基于Fabric + Vue3开发的一款开源Web图片编辑器,二次开发简单、扩展便捷、可帮助开发者快速构建一个面向非专业设计人员的图形编辑器

开源经历

关于我

我曾就职于优信二手车,参与过低代码平台的开发,现在一家互联网保险公司工作,参与音视频营销工具、外呼系统的开发,都属于复杂度比较高的前端项目,一直对架构和开源比较感兴趣,也在学习和积累设计模式、架构设计、开源相关的经验。
image.png
作为一位已经30岁的开发者,一直对开源有着强烈的兴趣,但是从未参与过,于是在好奇心的驱动下发起了这个开源项目。

项目经历

最初,我帮朋友实现了一个基于Fabric.js开发的图片生成工具,后面将核心功能抽离并开源到了Github上,投稿到了阮一峰老师的博客,获得了一些关注。

Fabric.js的底层能力非常强大,接口也很灵活,我最初以为只需要简单的API调用就可以实现一个图片编辑器,事实上我高估了自己的学习能力,也低估了Fabric.js的强大和灵活。

很多开发者反馈Fabric.js 的文档不太友好,太过强大和灵活也有一个弊端,那就是细节太多,要实现一个基础功能完整、功能丰富的图编辑器应用并不轻松,要掌握很多的细节,做很多基础的封装工作

我将开发过程发布到了技术社区,结识了很多Fabric.js的开发者。

  1. 《使用fabric.js 快速开发一个图片编辑器》
  2. 《fabric.js开发图片编辑器的细节实现》
  3. 《fabric.js开发图片编辑器可以实现哪些功能?》

短短几个月的时间,项目在Github上已经从0涨到1K+ Star,开源给我带来了新奇的体验。
image.png

沉淀

在和众多的开发者交流后,发现大家都在做同一件事情,重复的开发;大家更期望在不做太多基础工作的情况下,快速构建一个功能完整、易于扩展的图片编辑应用

目前的项目还只是一个前端应用项目,希望未来和社区一起沉淀一个介于Web图片编辑器应用与Fabric.js底层库之间的封装层,面向应用开发者设计,提供更简单的接口,让开发者可以通过开源SDK,快速构建图片编辑器应用
image.png

邀请

开源是很有魅力一件事情,我在Github上结识了很多志同道合的贡献者,他们是一个个富有热情且有执行力的有趣灵魂,是他们在深夜付出自己的时间与热爱为项目贡献代码,让不相识的后来人受益,让项目越来越好,我也从一个开源门外汉,和大家一起成为了开源贡献者
image.png
image.png

这是一个很新的项目和社区,有太多的工作需要做,如果你对这件事情感兴趣,真诚的邀请你加入,希望我们一起边走边学,在未来一起成为开源世界里的一部分,期待你的加入。


秦少卫
399 声望17 粉丝

前端开发者,vue-fabric-editor 开源项目作者