Image Editing Web Application

This project is an image editing web application rebuilt from the Vite starter app. It allows users to upload an image, make contrast and brightness adjustments, remove the background, select areas, and draw with paint, pencil, eraser, and image remover tools.

Features

• Contrast Adjustment: Adjust the contrast of the uploaded image.
• Light Adjustment: Modify the brightness of the image.
• Background Remover: Remove soft background areas automatically.
• Selector Tool: Select a rectangular area on the image.
• Remover Tool: Erase parts of the image with a transparent brush.
• Paint Brush: Paint on the image using a colored brush.
• Pencil Tool: Draw fine lines with a pencil-style tool.
• Eraser Tool: Erase drawing strokes from the overlay.

Project Structure

image-editing-website
├── public
│   └── index.html
├── src
│   ├── App.tsx
│   ├── App.css
│   ├── index.css
│   ├── main.tsx
│   └── editor
│       └── ImageEditor.tsx
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── README.md
└── .gitignore

Getting Started

1. Clone the repository:

   git clone <repository-url>
   

2. Navigate to the project directory:

   cd image-editing-website
   

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open your browser and go to http://localhost:3000.

Usage

• Upload an image using the upload button in the top-right.
• Select a tool and draw directly on the canvas.
• Adjust contrast and brightness with the sliders.
• Use the background remover button to make bright background areas transparent.
• Clear drawing, reset the image, or download the edited result as PNG.

License

This project is licensed under the MIT License.