{"id":13672830,"url":"https://github.com/wizard-a/fast-image-editor","last_synced_at":"2025-04-28T04:30:33.302Z","repository":{"id":106261684,"uuid":"383106953","full_name":"wizard-a/fast-image-editor","owner":"wizard-a","description":"一款开源图片编辑器，采用React + Typescript + React-knova 框架开发.","archived":false,"fork":false,"pushed_at":"2022-01-27T06:50:51.000Z","size":4967,"stargazers_count":171,"open_issues_count":1,"forks_count":30,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-02T00:02:57.566Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wizard-a.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-07-05T10:48:01.000Z","updated_at":"2024-10-25T13:56:58.000Z","dependencies_parsed_at":"2023-11-13T15:22:09.454Z","dependency_job_id":null,"html_url":"https://github.com/wizard-a/fast-image-editor","commit_stats":null,"previous_names":["jiechud/fast-image-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizard-a%2Ffast-image-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizard-a%2Ffast-image-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizard-a%2Ffast-image-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wizard-a%2Ffast-image-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wizard-a","download_url":"https://codeload.github.com/wizard-a/fast-image-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224095107,"owners_count":17254820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:50.564Z","updated_at":"2025-04-28T04:30:33.288Z","avatar_url":"https://github.com/wizard-a.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eWelcome to fast-image-editor 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg alt=\"Version\" src=\"https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000\" /\u003e\n  \u003ca href=\"http://39.97.252.98:3000/doc\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jiechud/fast-image-editor/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jiechud/fast-image-editor/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/jiechud/fast-image-editor\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 一块开源图片编辑器，采用React+Typescript+React-Konva开发。\n\n### 推荐一款AI对话平台 EVO Chat\n\u003e\nEvo Chat（Evolution Chat）是一个现代化的开源 AI 对话平台。致力于打造最优雅的大模型交互入口。它支持对接 ChatGPT，Deepseak， 等主流大语言模型（LLM）服务商，并在此基础上不断进化，识库增强、多模态处理、MCP（Model Control Protocol）等扩展能力，让 AI 能力更加丰富。支持全平台部署（Web、App、Windows、Mac、Linux），为用户提供无处不在的 AI 能力入口。\n\n* 访问地址：https://hevoai.com\n* github: https://github.com/evo-family/evo-chat\n\n### 🏠 [Homepage](https://github.com/jiechud/fast-image-editor#readme)\n\n### ✨ [演示地址](http://39.97.252.98:3000/)\n\n![示例图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97cb450cd5664d92b6d9ccffa4ef9998~tplv-k3u1fbpfcp-watermark.awebp)\n\n\n## Install\n\n```sh\nyarn install\n```\n\n## Usage\n\n```sh\nyarn run start\n```\n\n## Run tests\n\n```sh\nyarn run test\n```\n\n\n## 项目目录\n```\n.\n├── canvas-components  \n│   ├── canvas         //画布组件\n│   ├── layout         //页面布局\n│   ├── shape-panel    // 右侧面板\n│   └── transformer-wrapper // 支持transformer高阶组件\n├── components\n│   ├── color-select   // 颜色选择器\n│   ├── context-menu   // 右键菜单\n│   ├── image          // 图片\n│   ├── text           // 文本\n│   ├── text-input     // 文本输入\n│   └── toolbar        // 导航\n├── enum.ts\n├── global.css\n├── hooks\n│   └── useImage.tsx  // 图片kooks\n├── models1           // 状态管理\n│   ├── canvasDataModel.ts\n│   └── canvasModel.ts\n├── pages\n│   ├── index.less\n│   └── index.tsx\n├── styles\n│   ├── index.less\n│   └── theme\n├── typing.ts\n└── utils\n    └── util.ts\n```\n## 功能特性\n\n目前主要实现了简单的图片编辑，支持文字，图片等。\n\n### 已支持的功能列表\n\n- [x] layout布局\n- [x] 文字编辑组件\n- [x] 图片编辑组件\n- [x] 画布放大缩小\n- [x] 画布右键菜单\n- [x] 图片下载\n- [x] 背景图支持\n\n\n\n### 待实现的功能列表\n\n- [ ] 工具类操作支持上一步下一步\n- [ ] 图形组件\n- [ ] 标记组件\n- [ ] 画布多个元素组合\n- [ ] 文字组件增加，字体丰富，透明度等。\n- [ ] 画布参考线\n- [ ] 画布多个尺寸，支持多平台\n- [ ] 接入后台，实现登录，保存模板\n\n\n## 系列文章\n\n* [两个周末写了个图片编辑器](https://juejin.cn/post/6996926544182542366)\n* [给图片编辑器添加了辅助线](https://juejin.cn/post/6997926959917318181)\n* [给图片编辑器添加了【撤销重做】功能](https://juejin.cn/post/6998287682593882142)\n* [给图片编辑器添加了【框选节点】功能](https://juejin.cn/post/7003604608320798734)\n## 项目架构\n\n项目用React umi开发框架，采用typescript编写，图片编辑功能用的是`react-konva`,考虑后期可能核心的编辑功能整体做成一个组件，所以没有umi里提供的`useModel`去做状态处理，采用的是`flooks`。\n\n\n技术栈\n|  技术   | 说明  | 官网  |\n|  ----  | ----  |  ---- |\n| typescript  | JavaScript 的一个超集,支持 ECMAScript 6 |  https://www.tslang.cn/      |\n| umi  | 插件化的企业级前端应用框架。 |  https://umijs.org/zh-CN      |\n| react-konva |用于使用[React](http://facebook.github.io/react/)绘制复杂的画布图形 。 |  https://github.com/konvajs/react-konva     |\n| immer | 创建不可变数据 |  https://immerjs.github.io/immer/docs/introduction |\n| flooks  | 一个 React Hooks 状态管理器，支持惊人的 re-render 自动优化 |  https://github.com/nanxiaobei/flooks    |\n| ahooks |  提供了大量自应用的高级 Hooks |  https://github.com/alibaba/hooks |\n| react-color| 一个React颜色选择器   | https://github.com/casesandberg/react-color  |\n\n## 联系我\n\n建立了一个微信交流群，请添加微信号`q1454763497`,备注`image editor`,我会拉你进群\n\n## Author\n\n👤 **杰出D**\n\n* Website: https://juejin.cn/user/2981531265821416/posts\n* Github: [@jiechud](https://github.com/jiechud)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/jiechud/fast-image-editor/issues). You can also take a look at the [contributing guide](https://github.com/jiechud/fast-image-editor/blob/master/CONTRIBUTING.md).\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License\n\nCopyright © 2021 [杰出D](https://github.com/jiechud).\u003cbr /\u003e\nThis project is [MIT](https://github.com/jiechud/fast-image-editor/blob/master/LICENSE) licensed.\n\n***\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwizard-a%2Ffast-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwizard-a%2Ffast-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwizard-a%2Ffast-image-editor/lists"}