阅读 798

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

本文已参与掘金创作者训练营第三期「高产更文」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力

前言

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

案例演示

local1222.gif

演示地址

演示地址

快速启动

  • 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

技术栈

技术说明官网
typescriptJavaScript 的一个超集,支持 ECMAScript 6www.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提供了大量自应用的高级 Hooksgithub.com/alibaba/hoo…
react-color一个React颜色选择器github.com/casesandber…

联系我

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

image.png

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

地址

总结

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

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

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

文章分类
前端
文章标签