项目地址：sleepy-zone/fabritor-web: A creative editor based on fabricjs. (github.com)
（访问需要魔法）
说在前面
说起图片编辑器，就不能不说小红书，在内容领域这一块，小红书可以说无出其右了，将图文这种表达形式推上了巅峰，公众号、知乎想法也抄的不亦乐乎。因为关注图文这块，又看到了一些新兴的图片编辑器，比如 canva.cn。canva 给人的感觉总体比较时尚，功能也比较强大，比好多项目仿的那些要高级很多。
但有时这些产品用着总感觉差点意思，都是类似限时限量免费，便决定着手开发一款类似的产品。
回到标题，为什么说又一款图片编辑器。因为当我开始开发的时候，我才发现原来这个领域这么卷，已经有巨多类似产品或者项目了。商业的，比如上面提到的Canva ，还有美图秀秀，以及一些我之前没听过的，开源个人作品也很多，在此不一一列举。
图片编辑器技术方案也多种多样，有基于 Canvas 的，老牌的库 fabricjs 以及新兴的 konva；有基于 svg（上面提到的 canva），甚至还有纯基于 dom 操作的，再甚至还有借助服务端无头浏览器能力的导出图片的（有点浪费浏览器的能力）。后面可以出一个各类技术方案优缺点的对比，既然有这么大的需求在，那对于不同场景的选择会更加有帮助。
fabritor 简介
说回fabritor（终于说回我的项目了😂），看名字很明显了，致敬了一下 fabricjs。
官方这样介绍：
Fabric.js is a powerful and simple Javascript HTML5 canvas library, Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser
这里不过多聊 fabricjs 的特性了，后面开个文章继续聊。（一会儿已经开了俩坑了）
fabricjs 最近在准备 6.0 版本了，已经进入 beta阶段了。
界面的话，使用 React。看了几个项目，大多都是 vue3，那用 React 也算多一种选择吧。ui库，用到了 Ant Design，算是国内 UI 库天花板了（虽然出过一些不好的事情😂）。此外单独说一下，脚手架使用了ice，虽然 github star 很多（17.7K），但比较少听人说起，但用起来真的很不错。
说回项目。基于fabricjs，所有的操作都在浏览器端实现。多嘴一下，纯浏览器操作应该是一个趋势，安全便捷。不止合图，甚至图片压缩、图片背景移除都有对应的浏览器操作，后面也考虑集成进 fabritor。
图片压缩：squoosh
图片背景移除：background-removal
又一款开源图片编辑器
fabritor，刚刚发布了 1.0.0 版本，下面列举一些功能，也都是图片编辑器常见的一些功能。
文本
支持多种开源字体，从各处扒过来的（字体文件比较大，体验地址可能加载比较慢），有一些字体商业项目也在用。也支持文字的一些常用设置。
同时也支持一些简单的文本特效，描边和阴影。
图片
支持添加本地或者远程图片。如果自己有服务器（如阿里云OSS），可以先上传后添加。
同时支持图片添加边框和圆角，这里没有直接使用 fabricjs Image 对象实现，而是使用 rect 和 pattern 实现，这样就可以方便的添加边框了。
形状
支持简单的线段、箭头和多边形。
多嘴一下，好多开源项目不管是箭头还是圆角矩形，再修改线段宽度或者拖拽时都没有做处理，感觉很不严谨。
画笔
简单的自由绘制。
应用
支持二维码 和 emoji。
图层管理
简单的图层和操作。
模板库
fabritor 支持导出 fabricjs 支持的 json 数据，可以建立自己的模板库。建议去 canva 或者 美图秀秀找找灵感。自带两个模板都是参照美图秀秀的模板而来的。
其他操作
快捷键、成组、复制粘贴、导出图片、SVG和模板在此不一一列举，可以进入体验地址或者自行启动项目体验。
有一些功能，虽说看着平平无奇，也是做了一些定制实现的，后面再开一篇文章讲一下（感觉开了好几个坑了）。
后续
1.0.0 版本基本可用，制作一些不错的效果也是可以做到的。但离着完善还有一些事情要做。已经在着手下个版本的开发了。
如果觉得项目不错，可以点个 star：github.com/sleepy-zone… 👀
原文链接：https://juejin.cn/post/7312818418594988042 作者：SleepyZone
