Image-Editor

KO | EN

gitlite — search

#javascript #python #ai #android #machine-learning #deep-learning #linux #macos #nodejs #awesome #awesome-list #pytorch #mcp #openai

(★ 10)

This is a react app in which you upload multiple images, then you edit only one of the image and the app will edit the rest of the images for you

Image-Editor Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Table of Contents:
- [About](https://github.com/Naman-1234/Image-Editor#about)
- [Getting Started](https://github.com/Naman-1234/Image-Editor#getting-started-with-create-react-app)

# About
Image-Editor as its name suggests is an image editor. It lets you edit multiple photos, You only have to edit properties mentioned in the slider and it will edit all the photos for you.

### Inspiration
I got an idea of building this, when I had to compare multiple photos for a small Mini-Project in different look. It just was kind of massacre to test by looking into each, Also it did not give a better clarity. That's when I thought of building this.

### Usage
Please find the following [video](https://youtu.be/-BKU6ozhWrQ) to know how to use this

### Glimpse
A Glimpse of this webApp could be taken by the following screenshots:
![Screenshot (181)](https://user-images.githubusercontent.com/63748249/116880265-6c033a00-ac3f-11eb-8646-5be54fe6798a.png)
 
![Screenshot (182)](https://user-images.githubusercontent.com/63748249/116880273-6efe2a80-ac3f-11eb-8cf7-2caf7c1901eb.png)
 
![Screenshot (183)](https://user-images.githubusercontent.com/63748249/116880301-76253880-ac3f-11eb-8a15-217993a69379.png)

### Miscellaneous

- Why didn't use Backend? 
At the time of making this Web App, I did know enough backend and middlewares like Multer which could have been made things much easier.
But I was curious if this problem could be solved using Frontend only. I thought of giving it a try and it came well and it taught me a lot in the FrontEnd domain.

- Why didn't I use any Inbuilt Image Editor
As mentioned in the previous Paragraph, I build this webApp for sole purpose of learning and enhancing my skills. Without using library I got to learn about image proprties in css.

- Learning Outcomes 
Through building this I learnt many things, some of them are: 
 1. Blob(Binary Large Objects). 
 2. Better knowledge of React. 
 3. Libraries like jsZip. 
 4. Enhancements of Css Skills

### Installation Steps:
- For setting up this project, Follow mentioned steps: 
 1. Go to Code and copy https link from there. 
 2. Now Open your terminal. 
 3. Navigate to any directory preferred by you through using cd command. 
 4. Clone project there by
 ``` git clone <url copied>``` 
 5. Navigate to Image-Editor by `cd Image-Editor` and type `npm i` to install all packages. 
 6. After Following this steps go to [Getting Started Page](https://github.com/Naman-1234/Image-Editor#getting-started-with-create-react-app) for further information.

Image-Editor

Image-Editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Image-Editor

Image-Editor Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README