DEV Community

Cover image for Building Zero-Upload Browser Utilities: 300 DPI JFIF Injection, Linear O(W H) Distance Transforms & Destructive PDF Redaction
Longwave AI Lab
Longwave AI Lab

Posted on Originally published at ondevicedesk.com

Building Zero-Upload Browser Utilities: 300 DPI JFIF Injection, Linear O(W H) Distance Transforms & Destructive PDF Redaction

#webdev #javascript #security #webassembly

Most "free" everyday web utilities (passport photo makers, die-cut sticker generators, PDF redactors, and bank statement converters) share an uncomfortable architectural flaw: they upload your sensitive personal files to a remote server just to run a 20-millisecond image or document transformation.

Even worse, many browser-based PDF "redaction" tools simply append a black rectangle (re f) on top of the existing PDF text layer without removing the underlying string tokens (Tj / TJ). Anyone who opens the downloaded PDF can press Ctrl+F or copy-paste the hidden Social Security Number, account number, or address right out of the file.

To fix this, we built OnDevice Desk, a suite of four 100% free, zero-upload browser studios powered entirely by local Web Workers, OffscreenCanvas, and deterministic binary stream parsers. Every byte stays on your computer, and you can even turn on Airplane Mode before dropping a file.

Here is a look under the hood at the four core client-side algorithms powering the ecosystem.

1. Exact 300 DPI JFIF Binary Injection & Portal KB Binary Search (id.ondevicedesk.com)

When you export a JPEG from an HTML5 <canvas> using canvas.toBlob('image/jpeg', quality), browsers write a default 72 DPI or 96 DPI density header in the JFIF APP0 marker (0xFFE0).

However, government visa and passport portals (such as the US State Department DS-160, Schengen Visa, UK HMPO, and Vietnam CCCD portals) inspect both:

  1. The exact APP0 binary density header (300 × 300 DPI), and
  2. Strict kilobyte bounds (for example, 54 KB to 240 KB).

How We Solved It Client-Side

  1. Binary JFIF APP0 Splicing: After rendering the aligned portrait on an OffscreenCanvas, we inspect the raw Uint8Array JPEG stream right after the SOI marker (0xFFD8) and write densityUnits = 1 (dots per inch) followed by big-endian 300 (0x012C) for both X and Y density ([0x01, 0x01, 0x2C, 0x01, 0x2C]).
  2. 7-Step Quality Binary Search + Compliant 0xFFFE COM Padding: To guarantee the output JPEG lands strictly inside [minKB, maxKB], a Web Worker runs a 7-iteration binary search over the JPEG quality parameter q ∈ [0.05, 0.99]. If a high-key white-background portrait naturally compresses below minKB even at q = 0.99, our encoder injects chained, specification-compliant 0xFFFE (COM) segments (<= 60,002 bytes per chunk) before the EOI marker (0xFFD9) so the file passes portal validation on the first upload.
  3. $0.39 Pharmacy Print Sheet Tiling: Need physical prints? The studio tiles 4, 6, or 8 calibrated portraits onto a single 1800×1200 px (4×6 inch at 300 DPI) postcard canvas with light scissor cutlines.

2. Linear-Time $O(W \times H)$ Euclidean Distance Transform for Die-Cut Stickers (sticker.ondevicedesk.com)

Generating a smooth white vinyl die-cut border of radius $R$ (4px to 36px) around a transparent PNG illustration is computationally expensive if done via naive 2D morphological dilation, which scales as $O(W \times H \times R^2)$.

How We Solved It Client-Side

We implemented Felzenszwalb & Huttenlocher's separable 1D parabolic Euclidean Distance Transform (EDT):

  1. We extract the alpha channel threshold mask from the uploaded PNG.
  2. We compute the lower envelope of parabolas $(x - i)^2 + f(i)$ in a horizontal 1D pass ($O(W)$ per row), followed by a vertical 1D pass ($O(H)$ per column).
  3. Because the lower-envelope intersection points are monotonic, both passes complete in strictly linear $O(W \times H)$ time, completely independent of the outline radius $R$!
  4. We apply sub-pixel anti-aliasing (clamp(radius + 0.5 - sqrt(distSq), 0, 1)) for razor-sharp vinyl borders and outer kiss-cut guide lines, alongside a Batch EXIF/GPS Metadata Stripper that purges APP1 (EXIF/XMP), APP13 (IPTC), and eXIf/tEXt chunks across multiple photos into a clean .ZIP archive.

3. Destructive 300 DPI PDF Redaction & Split-Span PII Clustering (pdf.ondevicedesk.com)

PDF files do not store paragraphs, because they store positioned glyph runs (BT ... Td (text) Tj ET). A single Social Security Number or IBAN is often split across two or three separate text operators on the same horizontal line.

How We Solved It Client-Side

  1. Horizontal Baseline Clustering (±2.5pt): Our parser extracts every text span with its (x, y, width, height) bounding box, sorts spans by vertical baseline within a ±2.5pt tolerance, and merges horizontally adjacent runs before matching PII patterns (SSNs, credit cards, emails, phone numbers, IBANs, and custom keywords).
  2. True Destructive Stream Removal + Bitmap Burn-In: When you click download, the engine physically removes the matching text operators from the PDF page stream (including FlateDecode compressed streams and multi-stream /Contents arrays) and burns solid blackout rectangles into the page so zero underlying text tokens survive.
  3. Offline Bank Statement to CSV/Excel Converter: The same horizontal baseline clusterer reconstructs tabular bank statement rows (Date, Description, Inflow, Outflow, Balance) into a clean .CSV or .XLS spreadsheet without uploading financial records to the cloud.

4. 64-Step Bidirectional Goal Solver & 2K Financial Cards (calc.ondevicedesk.com)

Financial calculators usually work in only one direction: you type inputs and read the output. What if you know your target outcome (such as an 18-month SaaS cash runway, a 28% e-commerce net profit margin, or $120,000 in freelance take-home pay) and want to know the exact MRR, retail price, or hourly rate required?

How We Solved It Client-Side

  1. 64-Iteration Monotonic Bisection Solver: Our calculator engine automatically detects whether a formula is monotonically increasing or decreasing with respect to the chosen input variable and runs 64 bisection steps to converge within ±0.001 of your target goal in under 1ms.
  2. 1-Click 2560×1440 (2K) Summary Card Exporter: Every calculation can be exported as a crisp 2560×1440 (2K QHD) PNG or vector SVG card, or formatted into a clean printable client invoice, 100% inside your browser.

Open Architecture & Machine-Readable Documentation

All four studios are 100% free to use with no account required:

Top comments (0)