🎨 Image Editor

Introduction

Our project is an image editor that runs on a web browser written by Javascript.
We used some references

• An image editor based on Fabric.js.
• Some parts of code are from ToastUI Image Editor and glfx.js

Overview

• Save and Load - Save current project as JPG or PNG. Also, Load from image.
• User ID - Manage projects using individual ID. Use mysql as Database. There are two tables USERS table and PROJECTS table.
• Main page - You can create or load a project of any size.

• Editor page - Edit your project using tools.

• Get image - You can search under any title to use the image.

• Load project - View projects when login.

How to start

Before launching the below code open mysql and set config.
You can start editor by executing following command.

• client

npm install
npm run start

• server

npm ./server/app

And then access it by using a browser. http://localhost:8080
Server is running on 8000 port.
Dependency conflicts may happen.

Structure

Details

image_editor
│───README.md   
│
└───public
│   │───index.html
│   │
│   └───image
│       └───.svg
│
└───src
│   │───index.js
│   │───Route.js
│   │
│   └───css
│   │   │───Error.scss
│   │   │───ImageEditor.scss
│   │   │───ImageList.scss
│   │   │───Loading.scss
│   │   │───Main.scss
│   │   │───New_project.scss
│   │   │───Save.scss
│   │   │───UploadFIle.scss
│   │   │
│   │   └───Login
│   │   │   │───font-awesome.min.scss
│   │   │   │───main.scss
│   │   │   │───util.scss
│   │   │   └───fonts
│   │   │   
│   │   └───ui
│   │       │───Draw.scss
│   │       │───Filter.scss
│   │       │───History.scss
│   │       │───Icon.scss
│   │       │───Image.scss
│   │       │───Rotation.scss
│   │       │───Shape.scss
│   │       └───Text.scss
│   │
│   └───locale
│   │   │───i18n.js
│   │   │
│   │   │───ko
│   │   │   └───korean.json
│   │   │
│   │   └───en
│   │       └───english.json
│   │
│   └───components
│       │───Change_password.js
│       │───Error.js
|       |───Find_password.js
│       │───ImageEditor.js
│       │───ImageList.js
│       │───LoadImage.js
│       │───Login.js
│       │───Main.js
│       │───New_project.js
│       │───Project.js
│       │───Save.js
│       │───SignIn.js
│       │───SignUp.js
│       │───Upload_file.js
│       │    
│       └─── action
│       │     │───Action.js
│       │     │───Clip.js
│       │     │───Crop.js
│       │     │───Delete.js
│       │     │───Draw.js
│       │     │───Fill.js
│       │     │───Filter.js
│       │     │───Flip.js
│       │     │───Icon.js
│       │     │───Image.js
│       │     │───Line.js
│       │     │───ObjectAction.js
│       │     │───Rotation.js
│       │     │───Shape.js
│       │     └───Text.js
│       │
│       └─── const
│       │     └───consts.js
│       │
│       └─── extension
│       │     │───Extension.js
│       │     │───Grid.js
│       │     │───Layers.js
│       │     │───Pipette.js
│       │     │───Snap.js
│       │     └───Util.js
│       │   
│       └─── filters
|       │    └─── glfx
│       │          │───denoise.js
│       │          │───hexagonalPixelate.js
│       │          │───ink.js
│       │          │───vibrance.js
│       │          │───vignette.js
│       │          └───zoomblur.js
│       │
│       └─── helper
│       │     │───Brush.js
│       │     │───ConverRGB.js
│       │     │───originImage.js
│       │     │───Resize.js
│       │     └───SwithTools.js
│       │
│       └─── ui
│             │───Canvas.js
│             │───Draw.js
│             │───Effect.js
│             │───Filter.js
│             │───History.js
│             │───Icon.js
│             │───Image.js
│             │───Loading.js
│             │───Object.js
│             │───Rotation.js
│             │───Shape.js
│             │───SideNav.js
│             │───Text.js
│             └───Tools.js
│                                               
└───server
    │─── app.js
    │
    │─── config
    │     │───db-config.json
    │     │───jwt.js
    │     └───user.sql
    │
    │─── database
    │     └───index.js
    │
    │─── middlewares
    │     └───auth.js
    │
    └─── routes
          └───api
              │───auth
              │   │───controller.js 
              │   └───index.js
              │
              └───content
                  │───controller.js 
                  └───index.js

Contributor

Hyeon Beom Seo
Ju Kyung Yoon
Se Myeong Lee

Bug Report

If you find a bug. please report to us posting issues on GitHub.