🖼️ Image Upload Grayscale Black White

A small frontend tool to upload an image and convert it to grayscale or black white.

---

Contents

• Purpose
• Installation
• Usage
• Function Description
• Tech Stack

---

Purpose

Quick local image conversion in the browser without a server

---

Installation

git clone <your-repo-url>
cd image-tool
npm install
npm run dev

Open http://localhost:5173

---

Usage

1. Select an image
2. Choose mode grayscale or black white
3. Optionally adjust threshold for black white
4. Save result from the canvas (right click → save as)

---

Function Description

Grayscale

• For each pixel the luminance is calculated
• Formula Y = 0.2126 * R + 0.7152 * G + 0.0722 * B
• Channels R G B are set to Y
• Result is a grayscale image with realistic brightness perception

Black White Threshold

• For each pixel Y is calculated as above
• Compare with a threshold e.g. 128
• If Y is greater or equal → pixel set to white 255
• If Y is smaller → pixel set to black 0
• Result is a binary image with clear edges

Internal Flow

• Image is loaded via file input and drawn to a canvas
• Pixels are read with getImageData and modified
• Result is written back with putImageData

---

Tech Stack

• HTML Canvas API
• JavaScript or TypeScript
• Optional Vite for dev server

---

Notes

• Processing happens entirely in the browser
• No uploads to a server
• Large images may affect performance