FilterPixel-Image-Processing-Website

Originally Developed By: Krish Gautam 🧑🏻‍💻👋

Welcome to the Image Optimization Tool! This project allows you to adjust the contrast, brightness, saturation, rotation, and format of your images in real-time.

Features

• Contrast Adjustment: Modify the contrast of your images.
• Brightness Adjustment: Change the brightness levels.
• Saturation Adjustment: Adjust the saturation to make colors more or less intense.
• Rotation: Rotate your images to the desired angle.
• Format Conversion: Convert images to different formats like JPEG, PNG, WEBP, TIFF, and AVIF.

Tech Stack Used!👇

Frontend:

• React: A JavaScript library for building user interfaces.
• Typescript: A typed superset of JavaScript that compiles to plain JavaScript.
• CSS: Styling the application.

Backend:

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express: A minimal and flexible Node.js web application framework.
• Sharp: High-performance image processing in Node.js.
• Multer: Middleware for handling multipart/form-data, used for uploading files.
• Typescript: A typed superset of JavaScript that compiles to plain JavaScript.

Installation

Follow these steps to set up the project locally.

Backend

1. Clone the repository:

   git clone https://github.com/Kris248/FilterPixel-Image-Processing-Website.git
   cd FilterPixel-Image-Processing-Website/backend

2. Install the dependencies:

   npm install

3. Start the server:

   npm run devStart

Frontend

1. Navigate to the frontend directory:

   cd ../frontend

2. Install the dependencies:

   npm install

3. Start the development server:

   npm start

Usage

1. Upload an image using the file input.
2. Adjust the sliders for contrast, brightness, saturation, and rotation.
3. Select the desired format from the dropdown menu.
4. Click the "Download Image" button to save the edited image.

Website Preview:

Contributing

Feel free to open issues or submit pull requests if you have any suggestions or improvements.