This article has participated in the third phase of the “High production” track at the Digger Creators Camp. For more details, check out the third phase of the Digger Project | Creators Camp to “write” personal impact.

preface

I plan to start writing articles this year, and each major platform needs to upload a cover image when it is released. There are many mature photo editors on the market. I have also done some partial tool applications before, so I came up with the idea of whether I can make an editor for digging friends to use. I spent about four or five days, and the first version of the content has been available.

Case presentation

Demo address

Demo address

Quick start

  • git clone [email protected]:jiechud/fast-image-editor.git
  • yarn install || npm install
  • yarn devStart the service
  • Open the browser

Project directory

.├ ── Canvas-Components │ ├── Canvas-Components │ ├── Shape-Panel // │ ├─ Transform-Wrapper // └ ── Components │ ├── color-select // │ ├─ Context -menu │ ├─ image // │ ─ text // │ ├── ch.htm │ ├─ ch.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── html.htm │ ├── library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm │ ├─ library.htm ├ ─ ─ but less │ └ ─ ─ theme ├ ─ ─ typing. Ts └ ─ ─ utils └ ─ ─ util. TsCopy the code

features

At present, the main implementation of simple picture editing, support text, pictures and so on.

List of supported functions

  • Layout layout
  • Text editing component
  • Image editing component
  • Zoom in and out
  • Canvas Right-click menu
  • Images are downloaded
  • Background image support

List of functions to be implemented

  • Tool class operations support the previous and next steps
  • Graphical component
  • Mark the component
  • A canvas consists of several elements
  • Text component increase, font richness, transparency and so on.
  • Canvas guide
  • Canvas multiple sizes, support for multiple platforms
  • Access the background to realize login and save the template

The project architecture

The project uses React UMI development framework and typescript to write. The image editing function is react-Konva. Considering that the core editing function may be made into a component in the later period, the useModel provided in UMI is not used for state processing, but flooks are used.

Technology stack

technology instructions website
typescript A superset of JavaScript that supports ECMAScript 6 www.tslang.cn/
umi Plug-in enterprise front end application framework. umijs.org/zh-CN
react-konva Used to useReactDraws complex canvas graphics. Github.com/konvajs/rea…
immer Create immutable data Immerjs. Making. IO/immer/docs /…
flooks An React Hooks state manager that supports amazing auto-render optimization Github.com/nanxiaobei/…
ahooks Provides a number of self-applied advanced Hooks Github.com/alibaba/hoo…
react-color A React color selector Github.com/casesandber…

To contact me

We have set up a wechat communication group, if you need to communicate and discuss, please join.

Qr code expired, please add wechat id Q1454763497, note Image Editor, I will pull you into the group

address

  • Demo address
  • The code address

conclusion

You can try it. If there is a bug, please mention issues, and I will fix it as soon as possible.

If you think it’s helpful, please help star on Github.