DEV Community: Mahendra Singh deora

How I built image and PDF tools that run in your browser, so the files stay on your device

Mahendra Singh deora — Sun, 15 Nov 2026 06:40:48 +0000

I didn't set out to build "another online tools site."

I set out to stop a very specific kind of afternoon. In India, during admission and exam season, a school office or cyber café often gets one sheet with many photos and signatures on it. Someone then sits in a photo editor, cuts each one out, resizes it to 20 KB or 50 KB, and names the files. It takes ages, and the files are other people's identity documents.

That is how Crop Desk started: a page where you can open that sheet in the browser, mark the boxes, and download the cropped files. The site is at usecropdesk.com. It is free, you don't need an account, and it is an independent India-based project. It is not affiliated with any exam board or government department.

The rule I didn't want to break

Once you are dealing with ID photos, signatures, and PDFs of forms, uploading those files to a server "just to crop them" feels like the wrong default.

So the product rule became: most tools should run in the browser. The file is chosen on the user's device, processed there, and downloaded from there. It should not have to sit on my server for the tool to do its job.

"Most tools" is the honest wording — I won't pretend every current and future feature is identical. The usual photo and document jobs are designed to stay on the device, and you can use them without signing up. An optional free account exists only to save your own work, such as typing-test history or a resume draft.

What "in the browser" actually means for the user

The flow is ordinary: open the page, pick a file, adjust the crop or the size, download the result. There is no "upload and wait for our server" step, because the work is not supposed to leave the device. In practice that uses what the browser already gives you — the file picker, in-memory image and PDF data, an on-screen preview, and a local download.

The trade-offs are ordinary too. You need a reasonably modern browser, and a network connection to load the page. A very large file can strain an older phone. The site can also be installed as a Windows app from Chrome or Edge, or added to an iPhone home screen from Safari — that is the same website, in its own window.

The tools that grew out of the first one

Once the bulk cropper existed, the next requests were predictable, because they come from the same forms.

People needed to hit a 20 KB, 50 KB, 100 KB or 200 KB cap without destroying the face or the signature. A generic "compress this image" button is not enough. The preview has to be good enough that you can see whether a form is likely to reject the file.

They needed passport-size photos: the usual India sizes, and also a dedicated 2×2 inch US passport photo page with a 4×6 print sheet.

They needed everyday PDF jobs in the same place: compress (including common KB targets), merge, sign, watermark, and a few conversions such as Word to PDF.

And, because this is India, they needed Hindi typing (Kruti Dev 010 and Mangal/Inscript) and a Kruti Dev ↔ Unicode converter.

Later I added only adjacent jobs: a resume builder with PDF download, a document scanner that flattens a phone photo, a signature background remover, a photo-and-signature joiner, HEIC to JPG, and image metadata removal.

What I still tell people

If an exam form says "photo under 20 KB, 3.5 × 4.5 cm, JPEG," the official notification is still the source of truth. I publish plain-language guides, and I try to keep them careful, but requirements change. I am not an exam body, and I don't want the site to sound like one.

The other thing I still want to improve is first-visit clarity. If someone lands on the homepage, can they tell — without reading a privacy policy — that the file stays on their device? That matters more to me than adding another tool.

If you try Crop Desk and something in that flow is unclear, I would rather hear that than a compliment.

This post was written with AI assistance and reviewed by the maker.

Hindi Typing Test in the Browser: Mangal, Kruti Dev and Custom Text

Mahendra Singh deora — Fri, 23 Oct 2026 02:45:59 +0000

Government typing exams in India (SSC, state clerk, court exams) often test Hindi typing in Mangal (Unicode/Inscript) or Kruti Dev layouts. Most free practice sites only support English, so I built a browser-based typing test that covers all three.

What it does

English, Mangal and Kruti Dev modes
Custom text: paste your own passage or upload a .txt file and start testing immediately
Long practice paragraphs, so text doesn't run out even in a 15-minute test
WPM, accuracy and error highlighting
Everything runs client-side; your text never leaves the browser

Why custom text matters

Exam passages have their own vocabulary (official notices, legal terms). Practising with a passage from a previous paper is far more useful than random sentences.

Related tools

Unicode to Kruti Dev converter that keeps English words, numbers and symbols like ₹ and % unchanged
All free tools

Try it here: Crop Desk Typing Test

Feedback welcome in the comments!

How I built a photo & signature cropper that never uploads your files

Mahendra Singh deora — Sat, 17 Oct 2026 13:58:07 +0000

Online forms are picky. A passport photo must be 2×2 inches. A signature must sit under 20 KB. A school office has one scanned sheet with thirty student photos and needs thirty clean files by tomorrow.

Most “free” tools solve that by uploading your ID photo to a server. I did not want that for Crop Desk, so every tool on cropdesk.co.in runs in the browser. The sheet, the crop, the ZIP, and the JPEG encode all stay on the device.

This post walks through three pieces: canvas cropping, sheet auto-detection with thresholding and connected components, and hitting an exact KB target with a binary search on JPEG quality. The rest of the toolkit (PDF merge/split/compress, image↔PDF, format conversion, age calculator) follows the same privacy model.

Why client-side only

The data path is intentionally short:

File → FileReader / createImageBitmap → draw on <canvas> → canvas.toBlob → download or JSZip.

There is no upload step in the happy path. After the page loads, the tools keep working offline. Ads pay for hosting; there is no account and no “pro” paywall for basic crops.

That constraint shaped the algorithms. No cloud vision API for box detection. No server-side ImageMagick for compression. Everything has to finish in a second or two on a mid-range Android phone, because that is where a lot of form uploads actually happen.

Canvas cropping (the boring foundation)

Every crop is the same pattern:

Load the image into an HTMLImageElement or ImageBitmap.
Create a canvas sized to the output pixels (e.g. 600×600 for a US 2×2 at 300 DPI, or whatever the preset needs).
drawImage(source, sx, sy, sw, sh, 0, 0, dw, dh) to copy the selected region and scale it in one call.
Export with toBlob('image/jpeg', quality) or PNG/WebP.

Presets (US 2×2, 35×45 mm, Instagram, YouTube thumbnails, and similar) are mostly metadata: target width/height, optional print DPI label written into the file, and UI guides such as head-size lines for passport photos. The crop math does not care which portal you are filling — only the pixels you ask for.

For print-oriented sizes, convert millimetres or inches to pixels with px = mm / 25.4 * dpi (or inches × dpi). DPI itself does not change pixel data; some forms still check the EXIF/JFIF density tag, so a small metadata pass helps without re-encoding quality.

Signature background removal is the same canvas pipeline with an extra pixel pass: after drawing the crop, treat near-white (or near-paper) samples as background — either fill them white for JPG forms, or set alpha to 0 when exporting PNG.

Auto-detecting photos and signatures on a sheet

The bulk tool is for a common real workflow: one A4 scan (or phone photo of a sheet) with a grid of passport photos and signature boxes. Manual cropping per person is slow and easy to mis-number when you are preparing a whole class.

Rough pipeline:

Downscale a working copy so luminance and labeling loops stay cheap (detection runs on the small image; crops still use full resolution).
Threshold to a binary mask. Scanned forms are usually dark ink/photos on light paper, so a luminance threshold — or a simple adaptive threshold when lighting is uneven — separates “ink/photo” from background.
Connected components on the foreground mask (4-connectivity via union-find or two-pass labeling). Each blob gets a bounding box and area.
Filter dust, staple marks, and full-page borders using minimum area and aspect-ratio bounds.
Classify remaining boxes: larger, squarer regions tend to be photos; wider, shorter ones tend to be signatures. Layout heuristics (Sheet A: signature above photo; Sheet B: photo above signature) pair them and sort in reading order (top-to-bottom, then left-to-right within a row).
Draw green / dashed overlays so the user can nudge one box or all boxes, or scale them slightly, before export.

Edge cases are honest limitations: skewed phone photos, heavy shadows, patterned table backgrounds, and unusual form layouts. For those, Blank mode lets you draw boxes, add a grid, or reuse a saved layout from last week’s batch. Detection is a helper, not a guarantee.

When you confirm, each box is mapped back to full-resolution coordinates, cropped on a canvas, and named in order: 1_photo.jpg, 1_sign.jpg, 2_photo.jpg, … then packed with JSZip in the browser. Numbers follow box order on the sheet, so a numbered attendance list stays aligned with the ZIP.

Compressing to an exact KB target

Upload portals say “photo max 50 KB,” not “quality 0.72.” JPEG size is not linear in the quality slider, but it is monotonic at fixed dimensions: higher quality never produces a smaller file. That makes binary search a clean fit.

Sketch of the approach used in the compressor:

async function fitQuality(canvas, targetBytes) {
  const floorQ = 0.3;
  const ceilQ = 0.95;

  const atCeil = await canvasToJpeg(canvas, ceilQ);
  if (atCeil.size <= targetBytes) return atCeil;

  const atFloor = await canvasToJpeg(canvas, floorQ);
  if (atFloor.size > targetBytes) return null; // need smaller dimensions

  let lo = floorQ, hi = ceilQ, best = atFloor;
  for (let i = 0; i < 8; i++) {
    const mid = (lo + hi) / 2;
    const blob = await canvasToJpeg(canvas, mid);
    if (blob.size <= targetBytes) {
      best = blob;
      lo = mid;   // try higher quality
    } else {
      hi = mid;   // too big — lower quality
    }
  }
  return best;
}

canvasToJpeg is just canvas.toBlob(..., 'image/jpeg', q) wrapped in a Promise. Eight iterations are enough to land close to the best quality that still fits; more iterations give diminishing returns because the encoder’s quality scale is coarse.

If even floor quality is too big, quality alone cannot win. Encoded size scales roughly with pixel area, so the fallback shrinks width and height by about sqrt(targetBytes / currentBytes), redraws onto a smaller canvas, and runs the quality search again. Landing a little under the target is normal and desirable — portals accept “≤ 50 KB,” and JPEG entropy depends on how detailed the picture is.

The same pattern backs “resize and stay under N KB” flows: lock the required pixel size first when the form demands it, search quality, and only shrink further if the floor still overshoots.

PDFs and the rest of the toolkit

Not every rejection is about photos. PDF merge, split, rearrange, rotate, and compress use client-side PDF libraries with the same privacy model: parse in memory, rewrite pages, download. Image→PDF draws canvas pages into a PDF; PDF→image renders pages back out. JPG/PNG/WebP conversion is decode → canvas → encode (with a chosen background fill when flattening transparency to JPG). An age calculator sits alongside for forms that ask for exact age on a reference date.

None of that requires your files on my server. Practical write-ups for passport sizes, KB limits, signatures, and HEIC quirks live at cropdesk.co.in/guides.

What I am not claiming

Auto-detect will not nail every crumpled phone photo or fancy coloured form.
Hitting “exactly 50.0 KB” is less useful than “highest quality under 50 KB.”
Crop Desk is not affiliated with any exam board, university, or government portal — always check the official notification for sizes and formats.
The site is free and ad-supported; ads are how hosting stays paid without a sign-up wall.

Try it

If you prepare form uploads, run a cyber café / CSC desk, teach a class that submits photos in bulk, or just hate uploading ID photos to random compressors, try the tools at https://cropdesk.co.in. Feedback on failed sheet detections, missing country presets, and PDF edge cases is welcome — those reports steer what gets fixed next.