本文首发于公众号:品味前端,作者:茶无味,转载请注明出处。

前言

在数字时代,图片编辑器变得尤为重要,因为良好的海报图片可以比普通文字更吸引用户眼球,有助于增强吸引力或达到更好的宣传效应。

越来越多的在线设计网站相继出现,也发展了数十年,为设计师和普通团队提供了一种新的创作方式。使用在线设计网站时,⽤户通过简单的拖、拉、拽等操作,就可以轻松制作出精美的⼿机海报、文章长图、电商产品图、新媒体素材、视频/公众号封面、营销及⾏政物料等各类平⾯设计与创意效果。可以更方便地解锁创意,促进团队合作,优化未来的设计道路。

在这篇文章中,我搜罗了 Github 上的相关的项目,向各位推荐 5 个我觉得非常不错的开源图片编辑器,每款都有各自特点并且都是近期仍在更新迭代的,希望对你有所帮助。

以下出场顺序不排先后。

yft-design

一个基于 fabric.js 的在线图片编辑器,使用 Vue3 + TypeScript + Fabric.js + Element-Plus 的技术栈,该项目看起来比较注重设计文件的解析方面,作者是采用了 Python 库 psd-tools 在后端进行解析,支持 PSD、PDF 等多种格式解析,同时也支持导出图片、SVG、PDF 等多种格式的文件,不过该后端解析源代码目前尚未开源,感兴趣可以向该作者了解~

Github 开源地址:
https://github.com/dromara/yft-design (300+ star)

在线体验地址:
https://yft.design

vue-fabric-editor

同样是一款基于 fabric.js 和 Vue 的图片编辑器,是 Github 上的热门编辑器之一,目前作者已经维护两年了,很用心的项目!其侧重点是插件化,致力于让别的项目能快速接入图片编辑器的功能。另外该项目在国际化方面也做得不错,听说有些外国友人也在使用呢~

Github 开源地址:
https://github.com/nihaojob/vue-fabric-editor (3000+ star)

在线体验地址:
https://nihaojob.github.io/vue-fabric-editor/#/

gzm-design

这款编辑器是基于 Leafer 和 Vue 技术栈的,PSD 解析则采用了 ag-psd 这个库,解析效果还不错。leaferjs 类似于前面提到的 fabric.js,同样是一套操作 Canvas 的 JS 库,总体都是比较新的,相比于老牌的 fabric.js 优势尚不明朗,不过还是值得体验的~

Github 开源地址:
https://github.com/LvHuaiSheng/gzm-design (60+ star)

在线预览地址:
http://gzm-design.guozimi.cn/#/editor

fabritor

这是今天介绍的第三款基于 fabric.js 的图片编辑器了,作者表示虽然类似的编辑器已经很卷了,但基本都是 Vue 开发的,于是他采用了 React + Antd 的组合,这也是今天唯一介绍到的 React 技术栈项目,该编辑器目前开发时间尚短,所以功能看起来比较少,也暂时没有在线预览地址,期待后续的更新~

Github 开源地址:
https://github.com/sleepy-zone/fabritor-web (200+ star)

poster-design

以上提到的编辑器均是基于 Canvas 渲染和出图的,而接下来介绍的这个项目则是完全利用 HTML 能力实现的前端画布编辑,出图基于后端无头浏览器,由本人耗时两年开发,半年前正式开源,在之前的文章里都有介绍过,这里就不多说啦。核心编辑器与 Node.js 后端渲染服务均开源,在线官网「迅排设计」所有功能完全免费使用,近期也上线了免费的在线 AIGC 功能,欢迎体验。设计器持续更新迭代中,未来将致力于做最酷的开源在线海报图片设计器~

Github 开源地址:
https://github.com/palxiao/poster-design (2000+ star)

在线地址:
https://design.palxp.cn/

最后

以上就是文章的全部内容了,感谢看到这里!如果觉得写得还不错,对你有所帮助或启发,别忘了点赞收藏关注“一键三连”哦~ 我是茶无味(公众号: 品味前端),一名平凡的前端 Developer,希望与你共同成长~