首页 > 其他分享> 文章详细

(开源)两个周末写了个图片编辑器

2021-08-19 14:01:52 阅读：213 来源： 互联网

标签：github 开源 ts 画布周末编辑器 https 组件 com

前言

今年计划开始写文章，各大平台发布的时候需要上传一个封面图，市面上有好多比较成熟的图片编辑器。之前也做过一些偏工具类的应用，于是萌生想法，自己能不能搞一个编辑器，供掘友们使用，大概花了四五天的时间，第一版内容已经有了。

案例演示

演示地址

快速启动

git clone git@github.com:jiechud/fast-image-editor.git
yarn install || npm install
yarn dev 启动服务
打开浏览器

项目目录

.
├── canvas-components  
│   ├── canvas         //画布组件
│   ├── layout         //页面布局
│   ├── shape-panel    // 右侧面板
│   └── transformer-wrapper // 支持transformer高阶组件
├── components
│   ├── color-select   // 颜色选择器
│   ├── context-menu   // 右键菜单
│   ├── image          // 图片
│   ├── text           // 文本
│   ├── text-input     // 文本输入
│   └── toolbar        // 导航
├── enum.ts
├── global.css
├── hooks
│   └── useImage.tsx  // 图片kooks
├── models1           // 状态管理
│   ├── canvasDataModel.ts
│   └── canvasModel.ts
├── pages
│   ├── index.less
│   └── index.tsx
├── styles
│   ├── index.less
│   └── theme
├── typing.ts
└── utils
    └── util.ts

功能特性

目前主要实现了简单的图片编辑，支持文字，图片等。

已支持的功能列表

[x] layout布局
[x] 文字编辑组件
[x] 图片编辑组件
[x] 画布放大缩小
[x] 画布右键菜单
[x] 图片下载
[x] 背景图支持

待实现的功能列表

[ ] 工具类操作支持上一步下一步
[ ] 图形组件
[ ] 标记组件
[ ] 画布多个元素组合
[ ] 文字组件增加，字体丰富，透明度等。
[ ] 画布参考线
[ ] 画布多个尺寸，支持多平台
[ ] 接入后台，实现登录，保存模板

项目架构

项目用React umi开发框架，采用typescript编写，图片编辑功能用的是react-konva,考虑后期可能核心的编辑功能整体做成一个组件，所以没有umi里提供的useModel去做状态处理，采用的是flooks。

技术栈

技术	说明	官网
typescript	JavaScript 的一个超集,支持 ECMAScript 6	https://www.tslang.cn/
umi	插件化的企业级前端应用框架。	https://umijs.org/zh-CN
react-konva	用于使用React绘制复杂的画布图形。	https://github.com/konvajs/react-konva
immer	创建不可变数据	https://immerjs.github.io/immer/docs/introduction
flooks	一个 React Hooks 状态管理器，支持惊人的 re-render 自动优化	https://github.com/nanxiaobei/flooks
ahooks	提供了大量自应用的高级 Hooks	https://github.com/alibaba/hooks
react-color	一个React颜色选择器	https://github.com/casesandberg/react-color

联系我

建立了一个微信交流群，如需沟通讨论，请加入。

二维码过期，请添加微信号q1454763497,备注image editor,我会拉你进群

地址

总结

大家可以尝试一下，有bug可以提issues，我会第一时间修复.

大家觉得有帮助，请在github帮忙star一下。

标签：github,开源,ts,画布,周末,编辑器,https,组件,com
来源： https://www.cnblogs.com/qiaojie/p/15161401.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9