无界云图 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
无界云图 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
无界云图 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 馒头
适用人群 未知
收录时间 2024-05-06

软件简介

无界云图(免费开源的在线 B/S 图片编辑器)基于最新的国产的开源 canvas 2D 框架 (leaferjs)、React HooksTypescriptViteMobx 等主流 技术开发。我是一名 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 功能

  1. AI 抠图

选中图片后可以点击 AI 抠图按钮,等资源加载完成后点击要扣除的元素。AI 会自动识别抠图区域,点击确认即可进行快速抠图。

image.gif

  1. AI 涂抹

选中图片使用画笔涂抹要去掉的元素,点击确认即可快速涂抹掉水印等信息。

img.gif

  1. 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/%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3.md

技术说明

主要的技术栈:

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

开发文档

项目有完整的二次开发文档,方便大家进行二次开发,快速参与到项目中来。

MIT 开源

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

未来计划

后续还有很多工作要做:

  1. 完善技术文档和使用说明文档
  2. 更多 AI 功能集成(文生图、图生图、图片变清晰、去水印、去背景、AI 扩图)
  3. 完善以及各种有趣的插件(图表、表格等等)
  4. 交互细节优化(吸附对齐)

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(1) 发布并加入讨论🔥
发表了资讯
05/06 11:09

一款高颜值、可扩展、免费开源的国产在线图片编辑器

简介 无界云图(免费开源的在线 B/S 图片编辑器)基于最新的国产的开源 canvas 2D 框架 (leaferjs)、React Hooks,Typescript,Vite,Mobx 等主流 技术开发。我是一名 UI 设计师兼前端开发工程师,所以界面设计的非常漂亮精致,特意做了两套 UI 主题以便大家在不同风格的项目中 使用。 黑色主题: 白色主题: 功能说明 目前功能还是比较完善,做图片是够用了,目前其他功能正在快速开发中,下面是工具的功能说明: 1. 注册登录...

5
20
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
1 评论
10 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部