一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

fabritor,又一款开源的图片编辑器,基于 fabricjs

项目地址:sleepy-zone/fabritor-web: A creative editor based on fabricjs. (github.com)

在线体验:fabritor-web.vercel.app/

fabritor,又一款开源的图片编辑器,基于 fabricjs

(访问需要魔法)

说在前面

说起图片编辑器,就不能不说小红书,在内容领域这一块,小红书可以说无出其右了,将图文这种表达形式推上了巅峰,公众号、知乎想法也抄的不亦乐乎。因为关注图文这块,又看到了一些新兴的图片编辑器,比如 canva.cn。canva 给人的感觉总体比较时尚,功能也比较强大,比好多项目仿的那些要高级很多。

fabritor,又一款开源的图片编辑器,基于 fabricjs

但有时这些产品用着总感觉差点意思,都是类似限时限量免费,便决定着手开发一款类似的产品。

回到标题,为什么说又一款图片编辑器。因为当我开始开发的时候,我才发现原来这个领域这么卷,已经有巨多类似产品或者项目了。商业的,比如上面提到的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阶段了。

fabritor,又一款开源的图片编辑器,基于 fabricjs

界面的话,使用 React。看了几个项目,大多都是 vue3,那用 React 也算多一种选择吧。ui库,用到了 Ant Design,算是国内 UI 库天花板了(虽然出过一些不好的事情😂)。此外单独说一下,脚手架使用了ice,虽然 github star 很多(17.7K),但比较少听人说起,但用起来真的很不错。

说回项目。基于fabricjs,所有的操作都在浏览器端实现。多嘴一下,纯浏览器操作应该是一个趋势,安全便捷。不止合图,甚至图片压缩、图片背景移除都有对应的浏览器操作,后面也考虑集成进 fabritor。

图片压缩:squoosh
fabritor,又一款开源的图片编辑器,基于 fabricjs

图片背景移除:background-removal
fabritor,又一款开源的图片编辑器,基于 fabricjs

又一款开源图片编辑器

fabritor,刚刚发布了 1.0.0 版本,下面列举一些功能,也都是图片编辑器常见的一些功能。

文本

支持多种开源字体,从各处扒过来的(字体文件比较大,体验地址可能加载比较慢),有一些字体商业项目也在用。也支持文字的一些常用设置。

fabritor,又一款开源的图片编辑器,基于 fabricjs

同时也支持一些简单的文本特效,描边和阴影。

fabritor,又一款开源的图片编辑器,基于 fabricjs

图片

支持添加本地或者远程图片。如果自己有服务器(如阿里云OSS),可以先上传后添加。

同时支持图片添加边框和圆角,这里没有直接使用 fabricjs Image 对象实现,而是使用 rect 和 pattern 实现,这样就可以方便的添加边框了。

fabritor,又一款开源的图片编辑器,基于 fabricjs

形状

支持简单的线段、箭头和多边形。

多嘴一下,好多开源项目不管是箭头还是圆角矩形,再修改线段宽度或者拖拽时都没有做处理,感觉很不严谨。

fabritor,又一款开源的图片编辑器,基于 fabricjs

fabritor,又一款开源的图片编辑器,基于 fabricjs

画笔

简单的自由绘制。

fabritor,又一款开源的图片编辑器,基于 fabricjs

应用

支持二维码 和 emoji。

fabritor,又一款开源的图片编辑器,基于 fabricjs

fabritor,又一款开源的图片编辑器,基于 fabricjs

图层管理

简单的图层和操作。

fabritor,又一款开源的图片编辑器,基于 fabricjs

模板库

fabritor 支持导出 fabricjs 支持的 json 数据,可以建立自己的模板库。建议去 canva 或者 美图秀秀找找灵感。自带两个模板都是参照美图秀秀的模板而来的。

其他操作

快捷键、成组、复制粘贴、导出图片、SVG和模板在此不一一列举,可以进入体验地址或者自行启动项目体验。

有一些功能,虽说看着平平无奇,也是做了一些定制实现的,后面再开一篇文章讲一下(感觉开了好几个坑了)。

后续

1.0.0 版本基本可用,制作一些不错的效果也是可以做到的。但离着完善还有一些事情要做。已经在着手下个版本的开发了。

如果觉得项目不错,可以点个 star:github.com/sleepy-zone… 👀

原文链接:https://juejin.cn/post/7312818418594988042 作者:SleepyZone

(0)
上一篇 2023年12月16日 上午10:10
下一篇 2023年12月16日 上午10:21

相关推荐

发表评论

登录后才能评论