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

项目起因

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

相关推荐
伍哥的传说几秒前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达1 分钟前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing7 分钟前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy11 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码31 分钟前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_92 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆2 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵2 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号2 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端