Image Masking Tool

The Image Masking Tool is a Next.js application designed for image annotation and masking. Users can upload images, draw selections (rectangles, freehand paths, and brush strokes), and export a binary mask of their edits for further use. It is built with a focus on interactivity, flexibility, and simplicity.

---

Features

• Upload Images: Users can upload their own images for editing.
• Draw Modes:
  • Rectangle: Create rectangular selections on the image.
  • Freehand: Draw custom paths using freehand mode.
  • Brushing: Paint over the image with a brush tool.
• Responsive Canvas: The canvas adapts to screen sizes, ensuring a seamless experience across devices.
• Export Binary Mask: Users can export their edits as a binary mask in PNG format.
• Reset Tools: Easily clear selections or switch between drawing modes.
• Touch Support: Fully functional on touch devices for easy annotation.

---

Demo

• Live Link: http://image-masking-chi.vercel.app

---

How to Use

1. Upload an Image:
   • Click the "Choose File" button and select an image from your device.
2. Choose a Drawing Mode:
   • Use the toolbar to select between Rectangle, Freehand, or Brush modes.
3. Draw on the Canvas:
   • Interact with the canvas by clicking or dragging your mouse (or finger on touch devices).
4. Export Binary Mask:
   • Once your edits are done, use the toolbar to export the binary mask as a PNG file.
5. Reset or Change Modes:
   • Clear your edits or switch between drawing modes at any time.

---

Screens

1. Home Page:

2. Image Upload:

3. Annotation Example:

4. Export Binary Mask:

5. Help Page:

6. About Page:

7. Contact Page:

---

Installation

To run this project locally, follow these steps:

Prerequisites

Ensure you have the following installed:

• Node.js: v20 or above
• npm or yarn

Steps

1. Clone the repository:

   git clone https://github.com/celebiabdulkadir/image-masking.git

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open the application in your browser:

   http://localhost:3000