swimmingkiim / react-image-editor

React + Konva / image editor / like Figma or Canva

React Image Editor

How to Run Project

npm i
npm start

How to Serve

npm i -g serve
npm i
npm run build
npm run serve

Features

• Data

  • history (undo, redo)
  • copy, paste, duplicate

• Color

  • apply color picker
  • save & reload color list to localStorage

• Tab

  • create tab
  • delete tab
  • change canvas data by changing tab

• Frame

  • drag & drop
  • move
  • resize

• Export

  • export all frame
  • export selected frame

• EditableObject

  • Common
    • create by drag & drop
    • update
    • read
    • delete
    • change background color
    • move
    • resize
    • rotation
    • opacity
  • Image
    • import image
    • brightness
    • filter
  • Shape
  • Icon
    • from bootstrap
    • search icon
  • Text
    • create text
    • edit text
    • change color
    • text align
    • remove text

Support Me!

react-image-editor's Issues

Brush tool and line tool for masking

Great work, I really like this project. I noticed that there's a hook for brush but it isn't anywhere on the editor. I would like to create masks with it. Something like this

Also, i added the line widget locally since it looks complete.

How init sample-frame

I can initialize it by adding the corresponding json file in initilaStageDataList, but an error is reported.

Drag and Drop Images

What do you think of if it use OpenAI image generator insteadd of simple drag and drop?

I am sure it will be best.

Demo available

Hello, is there a demo of this available anywhere that I could try out before diving in?

Export frame not working

Export All Frame and Export Selected Frame are not working. Nothing happen when click on the export options.

Change EditableObject's implementation with `fabric.util.createClass`

Background

I got this idea when I was trying to implement the select method in EditableObject.
The issue that I was facing was that I could not extract EditableObject instances from the JSON format snapshot that the Data class has. In the current project's structure, It's too complicated to handle two states that represent the same thing.

Suggestion

• Implement EditableObject with fabric.util.createClass
• Also implement other custom object classes with EditableObject with fabric.util.createClass

References

• http://fabricjs.com/fabric-intro-part-3

Node version issue.

Hi, @swimmingkiim

Can you tell me what node version using?

I tried to run this on Node 16.16.0 and 18.16.0, but doesn't works.

:) Please reply.

Color Picker Issue

I can't close the color pikcer once I click it for set custom color.

Can you open the discuss or invite me to your project?

Export feature

There is a issue while export frame as a image. It doesn't works well.

Can you send an invitation?

Cannot find module 'react-image-editor' or its corresponding type declarations.

When I import ImageEditor from node modules, I'm getting the following error "Cannot find module 'react-image-editor' or its corresponding type declarations."

Select Editable Oject programmatically

Add text feature.

There is a Font tab, but user can't input their custom text.