5 款值得推荐的开源图片编辑器「建议收藏」

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

前言

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

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

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

以下出场顺序不排先后。

yft-design

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

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

在线体验地址: yft.design

vue-fabric-editor

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

Github 开源地址: github.com/nihaojob/vu... (3000+ star)

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

gzm-design

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

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

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

fabritor

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

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

poster-design

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

Github 开源地址: github.com/palxiao/pos... (2000+ star)

在线地址: design.palxp.cn/

最后

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

相关推荐
正小安1 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch3 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光3 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   3 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   3 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web3 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常3 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇4 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr4 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho5 小时前
【TypeScript】知识点梳理(三)
前端·typescript