简介
无界云图（免费开源的在线 B/S 图片编辑器）基于最新的国产的开源 canvas 2D 框架 （leaferjs）、React Hooks，Typescript，Vite，Mobx 等主流 技术开发。我是一名 UI 设计师兼前端开发工程师，所以界面设计的非常漂亮精致，特意做了两套 UI 主题以便大家在不同风格的项目中 使用。
黑色主题：
![image]()
白色主题：
![image]()
功能说明
目前功能还是比较完善，做图片是够用了，目前其他功能正在快速开发中，下面是工具的功能说明：
1. 注册登录
登录注册后可以上传图片，将项目保存到云端，目前支持微信二维码登录。
2. 创建项目
目前是这样设计的，一个工程中可以包含多个页面，一个页面中包含多个图层，点击左上角的 icon 可以在项目、页面、图层之间进行切 换。
![image.png]()
可以快速切换工程，页面，图层管理面板
![image.png]()
4. 使用模版
项目中预置了上百个模版，都可以免费使用。点击模版就会自动在项目中创建一个新的页面，也可以快速切换回原来的页面。
![image.png]()
5. 添加文字
项目预设的文字素材并不多，后续慢慢添加，用户也可以自己去调节文字参数得到自己想要的文字效果，项目中的字体均来源于网络上的 一些免费可商用字体，所以字体可以放心使用。
![image.png]()
文字支持样式设置比较丰富，基本上可以做出各种你想要的效果，文字也支持渐变色的设置
6. 添加图片
系统预设了大量的国外免费图片素材可以快速使用。图片支持边框，圆角，阴影等参数设置
![image.png]()
7. 修改背景
我们内置了大量好看的背景渐变色素材可以快速使用
![image.png]()
8. 插入 SVG 图标
支持直接复制 SVG 字符串 Ctrl+V 到画布中，这里接入了 iconfont 的 SVG 图标，支持 2700 多万的 SVG 图标
![image.png]()
选中我们喜欢的 ico，点击下载按钮，然后切换回我们的画布点击 Ctrl+V 就可以将图片粘贴到画布中。
![]()
![]()
9. 快捷键
为了方便用户快速的制作图片，我参考 PS 的习惯，添加了很多快捷键，快捷键说明可以点击左下角的图标进行查看。
![image.png]()
10. 快速复制粘贴
在登录 PC 版微信的时候，可以使用微信的 Alt+A 快速截图，然后切换到图片编辑器中使用 Ctrl+V 直接将图片赞贴到画布中。
![image.gif]()
11. AI 功能
- AI 抠图
选中图片后可以点击 AI 抠图按钮，等资源加载完成后点击要扣除的元素。AI 会自动识别抠图区域，点击确认即可进行快速抠图。
![image.gif]()
- AI 涂抹
选中图片使用画笔涂抹要去掉的元素，点击确认即可快速涂抹掉水印等信息。
![img.gif]()
- AI 文生图
AI 文生图白嫖豆包 AI，使用 iframe 直接嵌入了豆包 AI，可以点击右下角的 ico 进行文生图生成，使用 Alt+A 截图，再使用 Ctrl+V 粘贴到画布中。
渲染内核 SDK
渲染内核 SDK 是基于 Leaferjs 封装的一个专门用于图片编辑渲染的引擎，可以理解为一个类，使用我们提供的 JSON 数据结构传入这 个类就可以渲染出图片，具体的使用说明请参考文档：https://www.npmjs.com/package/image-editor-core
插件扩展
图片、文本、二维码等元素图层都属于插件，我们提供了插件开发的功能，可以支持插件的扩展。插件的开发文档请参考 ：https://github.com/mtsee/image-editor/blob/master/doc/插件开发文档.md
技术说明
主要的技术栈：
- Leaferjs 一款性能卓越的国产 canvas 框架，推荐尝鲜。
- React + Mobx +Typescript 常规组合，全部使用 Hooks，代码简洁易于维护。
- Semi-Design 抖音团队出的一款 UI 框架，交互体验和设计很不错，比较值得推荐！
开发文档
项目有完整的二次开发文档，方便大家进行二次开发，快速参与到项目中来。
MIT 开源
项目采用 MIT 协议开源，界面漂亮，交互体验好，有需要的小伙伴可以自取。开源不易，希望给个 star 对我们鼓励。
未来计划
后续还有很多工作要做：
- 完善技术文档和使用说明文档
- 更多 AI 功能集成（文生图、图生图、图片变清晰、去水印、去背景、AI 扩图）
- 完善以及各种有趣的插件（图表、表格等等）
- 交互细节优化（吸附对齐）
希望有更多的小伙伴可以 fork 我们的项目加入我们，提交代码一起完善这个项目。
