本文已参与掘金创作者训练营第三期「高产更文」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力。
前言
今年计划开始写文章,各大平台发布的时候需要上传一个封面图,市面上有好多比较成熟的图片编辑器。之前也做过一些偏工具类的应用,于是萌生想法,自己能不能搞一个编辑器,供掘友们使用,大概花了四五天的时间,第一版内容已经有了。
案例演示
演示地址
快速启动
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
功能特性
目前主要实现了简单的图片编辑,支持文字,图片等。
已支持的功能列表
- layout布局
- 文字编辑组件
- 图片编辑组件
- 画布放大缩小
- 画布右键菜单
- 图片下载
- 背景图支持
待实现的功能列表
- 工具类操作支持上一步下一步
- 图形组件
- 标记组件
- 画布多个元素组合
- 文字组件增加,字体丰富,透明度等。
- 画布参考线
- 画布多个尺寸,支持多平台
- 接入后台,实现登录,保存模板
项目架构
项目用React umi开发框架,采用typescript编写,图片编辑功能用的是react-konva
,考虑后期可能核心的编辑功能整体做成一个组件,所以没有umi里提供的useModel
去做状态处理,采用的是flooks
。
技术栈
技术 | 说明 | 官网 |
---|---|---|
typescript | JavaScript 的一个超集,支持 ECMAScript 6 | www.tslang.cn/ |
umi | 插件化的企业级前端应用框架。 | umijs.org/zh-CN |
react-konva | 用于使用React绘制复杂的画布图形 。 | github.com/konvajs/rea… |
immer | 创建不可变数据 | immerjs.github.io/immer/docs/… |
flooks | 一个 React Hooks 状态管理器,支持惊人的 re-render 自动优化 | github.com/nanxiaobei/… |
ahooks | 提供了大量自应用的高级 Hooks | github.com/alibaba/hoo… |
react-color | 一个React颜色选择器 | github.com/casesandber… |
联系我
建立了一个微信交流群,如需沟通讨论,请加入。
二维码过期,请添加微信号q1454763497
,备注image editor
,我会拉你进群
地址
总结
大家可以尝试一下,有bug可以提issues,我会第一时间修复.
大家觉得有帮助,请在github帮忙star一下。
如果你觉得该文章不错,不妨
1、点赞,让更多的人也能看到这篇内容
2、关注我,让我们成为长期关系
3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章