How I Built a 100% Client-Side Image Compressor for Indian Government Exams Using HTML5 Canvas & Astro

Applying for competitive exams in India (like SSC, UPSC, IBPS, and State PSCs) comes with a surprisingly frustrating bottleneck: strict, archaic image upload rules.

One portal asks for a passport photo between 20KB and 50KB with a specific pixel aspect ratio and a printed date of birth. Another demands a signature compressed strictly between 10KB and 20KB.

Most students end up uploading their personal photos and signatures to ad-heavy online resizers that process files on remote servers—creating an unnecessary privacy risk.

To solve this with zero server costs and 100% privacy, I built Sarkari Photo Tool, a fully client-side image resizer and compressor built with Astro, Tailwind CSS, and Vanilla TypeScript.

How the Client-Side KB Targeting Works

Instead of sending images to a backend (like Sharp or ImageMagick), the entire compression pipeline runs inside the user's browser using the native HTMLCanvasElement.toBlob() API:

1. Aspect Ratio & Pixel Mapping: When a user selects an exam preset (for example, the SSC GD Photo & Signature Resizer or UPSC CSE Photo Resizer), the canvas automatically locks into the exact official dimensions (e.g., 3.5cm x 4.5cm or 350x350 px).
2. Dynamic Date & Name Stamping: If the exam notification requires a printed name and date at the bottom of the photograph, the Canvas 2D context draws a clean white bar and renders the text dynamically before compression.
3. Iterative Binary Search Compression: Since canvas.toBlob(callback, 'image/jpeg', quality) doesn't let you specify a target file size in kilobytes directly, the script runs a fast binary search over the quality parameter (0.1 to 0.95) until the resulting Blob size lands squarely within the required KB range (e.g., 20KB–50KB).

Why Static + Programmatic SEO?

By combining Astro's static site generation with a centralized JSON specification database, every exam gets its own dedicated, ultra-fast route with zero runtime server overhead on Cloudflare Pages.

I also open-sourced the exam specification dataset here on GitHub: indian-govt-exam-photo-signature-specs.

If you are building micro-utilities, shifting heavy media processing to the client browser is the easiest way to keep hosting 100% free while giving users instant results!