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

项目起因

事情是这样的,前不久看到一个国产的开源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我们的项目加入我们,提交代码一起完善这个项目。

相关推荐
前进的搬砖er3 小时前
4.three.js的几何体、纹理、光源、材质、uv属性 讲义
前端
前端毕业班3 小时前
uni-app 小程序支持 teleport 了
前端·javascript·vue.js
东风破_3 小时前
LLM 为什么记不住你?无状态、messages 和上下文管理
javascript·人工智能
梨子同志4 小时前
qiankun
前端
梨子同志4 小时前
Nginx
前端
梨子同志4 小时前
NestJS
前端
梨子同志4 小时前
Next.js
前端
谭光志4 小时前
工具塞满上下文窗口怎么办?深度拆解 AI Agent Tool Search 按需加载实现原理
前端·后端·ai编程
Hilaku4 小时前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
陈随易5 小时前
前端项目部署只要30秒
前端·后端·程序员