<![CDATA[How We Built a 100% Client-Side Exact-KB Image Compressor & 16-Mode SVG QR Studio in TypeScript]]>https://exact-kb.hashnode.devRSS for NodeSat, 07 Nov 2026 11:28:04 GMT60<![CDATA[How We Built a 100% Client-Side Exact-KB Image Compressor & 16-Mode SVG QR Studio in TypeScript]]>https://exact-kb.hashnode.dev/how-we-built-a-100-client-side-exact-kb-image-compressor-16-mode-svg-qr-studio-in-typescripthttps://exact-kb.hashnode.dev/how-we-built-a-100-client-side-exact-kb-image-compressor-16-mode-svg-qr-studio-in-typescriptTue, 03 Nov 2026 15:45:33 GMTMost online image compressors and QR code generators have two major problems:

  1. Privacy risks: They upload your sensitive passport photos, ID cards, or government forms to remote cloud servers.
  2. Lack of exact byte control: Standard sliders let you pick "80% quality", which is useless when a government portal (like USCIS, DS-160, or SSC/UPSC) strictly requires a photo under 20KB, 50KB, or 100KB.

To solve this, we built CompressPhoto (ExactKB) — a 100% client-side, zero-upload web utility suite powered by the HTML5 Canvas API, Web Workers, and custom SVG geometry.

1. Binary Search for Exact-KB Image Compression

Instead of guessing a JPEG or WebP quality factor, CompressPhoto runs a deterministic binary search loop over the HTMLCanvasElement.toBlob() quality parameter (0.01 to 1.00) directly in the user's browser memory.

Built-In Presets for Strict Portal Requirements

We created dedicated workflows for the most common file-size limits on the web:

2. 16-Mode Vector SVG QR Code & Barcode Studio

Most free QR generators lock vector SVG downloads, custom eye frames, or center logos behind a monthly subscription, or inject tracking redirects that expire after 14 days.

With the CompressPhoto QR Code & Barcode Studio, every code is generated locally as pure mathematical SVG geometry:

  • 16 Direct-Payload Modes: URL, Plain Text, Wi-Fi (WIFI:T:WPA;...), Full vCard 3.0 Contact, Email, SMS, Phone, WhatsApp, Calendar Event (VEVENT), GPS Coordinates, Cryptocurrency (BTC/ETH/SOL), PayPal.Me, Zoom Meeting, Social Links, App Store, and 1D Barcodes (CODE128, EAN-13, UPC).
  • Custom Styling Engine: Supports square, rounded, dot, diamond, and classy module shapes, linear/radial SVG gradients, custom corner finder eyes, scan-me CTA frames, and center brand logos.
  • Batch QR ZIP Export: Generate dozens of QR codes at once and download them as high-resolution PNG, WebP, or infinitely scalable vector SVG files.

3. Biometric Passport Photo Maker & Private PDF Toolkit

Alongside exact-KB compression and QR generation, the suite includes two additional zero-server tools:

  • Biometric Passport & Visa Photo Maker: Crops and formats official 2x2 inch (US DS-160 / USCIS), 35x45mm (UK / Schengen), and international passport photos with printable 4x6 sheet layouts.
  • Client-Side PDF Compressor & Converter: Compresses oversized PDFs, merges multiple documents, converts images to PDF, and extracts PDF pages to JPG without uploading sensitive documents to third-party servers.

Open Source & Architecture

The entire project is built with React 19, TypeScript, and Tailwind CSS, running 100% in the browser with zero cloud storage dependencies.

]]>