不要命啦?做的这么好还开源-开源图片&海报编辑器工具

项目起因

事情是这样的,前不久看到一个国产的开源canvas 2d框架(leaferjs)做的非常棒,于是就跃跃欲试,打算用这个框架搞点什么,于是最终决定搞一个开源的在线的图片&海报编辑器,肝了一个月算是搞好了。

本人兼UI和前端工程师,所以嘛,UI也是精心设计了一番!做了两套皮肤。好不好用先不说,就看界面还不错吧!

项目网址:image.h5ds.com

功能说明

因为时间比较紧,所以目前功能还比较少,但是可以满足大部分用户的基本需求了,打开网页直接就可以免费使用,偶尔处理点图片啥的很方便,赶快收藏起来。下面是工具的功能说明:

1. 注册登录

登录注册后可以上传图片,将项目保存到云端,目前支持手机登录和二维码登录。

2. 创建项目

目前是这样设计的,一个工程中可以包含多个页面,一个页面中包含多个图层,点击左上角的icon可以在项目、页面、图层之间进行切换。

4. 使用模版

项目中预置了上百个模版,都可以免费使用。点击模版就会自动在项目中创建一个新的页面,也可以快速切换回原来的页面。

5. 添加文字

项目预设的文字素材并不多,后续慢慢添加,用户也可以自己去调节文字参数得到自己想要的文字效果,项目中的字体均来源于网络上的一些免费可商用字体,所以字体可以放心使用。

文字支持样式设置比较丰富,基本上可以做出各种你想要的效果,文字也支持渐变色的设置

6. 添加图片

系统预设了大量的国外免费图片素材可以快速使用。

图片支持边框,圆角,阴影等参数设置

7. 快捷键

为了方便用户快速的制作图片,我参考PS的习惯,添加了很多快捷键,快捷键说明可以点击左下角的图标进行查看。

8. AI功能

目前AI功能只加了一个AI抠图,想要扣什么内容就使用鼠标点击哪里,可以扣各种元素,因为是免费的,所以抠图的效果不是很好,如果有高要求的小伙伴可以尝试使用第三方的抠图服务。其他AI功能后续会慢慢加上。

技术说明

主要的技术栈:

  • Leaferjs 一款性能卓越的国产canvas框架,推荐尝鲜。
  • React + Mobx +Typescript 常规组合,全部使用Hooks,代码简洁易于维护。
  • Semi-Design 抖音团队出的一款UI框架,交互体验很不错,推荐!

开源

项目采用MIT协议开源,界面漂亮,交互体验好,有需要的小伙伴可以自取。开源不易,希望能动动你发财的小手给个star,这是对我们最大的鼓励。

未来计划

后续还有很多工作要做:

  1. 完善技术文档和使用说明文档
  2. 更多AI功能集成(文生图、图生图、图片变清晰、去水印、去背景、AI扩图)
  3. 完善以及各种有趣的插件(图表、表格、二维码等等)
  4. 交互细节优化(吸附对齐)
  5. 提供通用SDK,支持vue,react,angular等各种框架的集成

希望有更多的小伙伴可以fork我们的项目加入我们,提交代码一起完善这个项目。

相关推荐
Darling02zjh36 分钟前
GUI图形化演示
前端
Channing Lewis39 分钟前
如何判断一个网站后端是用什么语言写的
前端·数据库·python
互联网搬砖老肖1 小时前
Web 架构之状态码全解
前端·架构
showmethetime1 小时前
matlab提取脑电数据的五种频域特征指标数值
前端·人工智能·matlab
码农捻旧1 小时前
解决Mongoose “Cannot overwrite model once compiled“ 错误的完整指南
javascript·数据库·mongodb·node.js·express
淡笑沐白1 小时前
探索Turn.js:打造惊艳的3D翻页效果
javascript·html5·turn.js
海上彼尚2 小时前
秒删node_modules[无废话版]
vue.js·react.js
程序猿阿伟2 小时前
《数字分身进化论:React Native与Flutter如何打造沉浸式虚拟形象编辑》
flutter·react native·react.js
sunxunyong2 小时前
yarn任务筛选spark任务,判断内存/CPU使用超过限制任务
javascript·ajax·spark
Ynov2 小时前
详细解释api
javascript·visual studio code