🎨 ImageKit — Free & Local Image Tools

ImageKit is a modern, blazing-fast, browser-based suite of image manipulation tools. Built with a focus on privacy and performance, it allows users to resize, reshape, and host images effortlessly.

Zero installations. Zero backend servers for image processing. 100% free.

---

✨ Key Features

• 🔒 Privacy First (Local Processing): Image Resizer and Circle Crop tools run entirely in your browser using the HTML5 Canvas API. Your images never leave your device.
• 🌗 Seamless Dark/Light Mode: Intelligent theme toggling that saves your preference locally.
• ⚡ 60 FPS Performance: Silky smooth UI animations, drag-and-drop interactions, and instant live previews.
• 📱 Responsive Design: Mobile-first architecture ensures the app looks and works perfectly on desktops, tablets, and smartphones.
• 🎨 Modern UI/UX: Features glassmorphism, gradient chasing borders, and highly polished micro-interactions.

---

🛠️ Available Tools

1. 🔗 Image to Public URL

Convert any local image into a permanent, shareable public link.

• Integration: Powered by the free ImgBB API.
• Features: Auto-delete timers (5 mins to 1 month), custom naming, and direct URL/HTML/BBCode generation.
• Security: Your API key is stored securely in your browser's localStorage and is never sent anywhere except directly to ImgBB.

2. 📐 Image Resizer

Resize your images accurately without losing quality.

• Units Supported: Pixels (px), Centimeters (cm), Inches (in), Millimeters (mm), and Percentages (%).
• Features: Aspect ratio locking (🔗), quick presets, quality sliders, and file-size estimation.
• Export Formats: PNG (Lossless), JPG, and WebP.

3. ⭕ Square to Circle Crop

Instantly turn standard square or rectangular images into perfect circular avatars.

• Customization: Add custom padding, border width/color (including a modern gradient border), and adjustable drop shadows.
• Backgrounds: Export as transparent, solid white, solid black, or a custom HEX color.
• Export Format: High-quality transparent PNG.

---

🚀 How to Run Locally

Since ImageKit is built with pure Vanilla Web Technologies, you don't need Node.js, npm, or any build tools!

1. Clone or Download the repository to your local machine.
2. Open the folder containing the files.
3. Simply double-click index.html to open it in your default web browser.

   Tip: For the best development experience, open the folder in VS Code and use the Live Server extension.

---

🔑 Setting up the "Image to URL" Tool

To use the Image to URL feature, you need a free ImgBB API key:

1. Go to ImgBB and create a free account.
2. Navigate to your Profile → API section.
3. Copy your unique API Key.
4. Open the Image to URL tool in ImageKit, paste the key, and click Save Key. It will be saved locally in your browser.

---

📁 File Structure

ImageKit/
│
├── index.html             # The landing page / Tool selector
├── image-to-url.html      # Tool 01: Image Hosting logic & UI
├── image-resizer.html     # Tool 02: Canvas Resizing logic & UI
├── square-to-circle.html  # Tool 03: Canvas Circle Crop logic & UI
└── shared.css             # Master stylesheet (Variables, Themes, Shared UI)