Clinical Image Annotator — Shade, Label, Crop, Redact

Watch

The one-minute tour

Recorded on a synthetic test angiogram generated for the demo, not a patient image. The annotations and exports are the app’s real output. The video has no sound.

The Problem

Pointing at an image shouldn’t take an image editor

Clinicians share images all day: a bleed to a surgeon on WhatsApp, a case for teaching, a figure for a paper. Marking “this is the tumour, this is the feeding artery” usually means a phone photo of the screen, a scribble in a photo app, or a slow session in a general-purpose editor. Names and record numbers burned into the image tend to go along with it.

What I Built

Shade, label, crop, redact, share

Paste, drag in or pick an image (on a phone, straight from the camera). Shade a region with a brush or lasso in one of five colours chosen to stay distinct on greyscale images. Tap to add a labelled pointer, using recent labels as one-tap chips, or leave the text empty for an arrow-only pointer, the usual journal convention. Crop away the PACS window, and draw opaque black boxes over burned-in names, record numbers and dates. Then copy the finished image to the clipboard, share it, or download a PNG or JPEG at original or double resolution. Annotations can be saved as a small file and reopened later on the same image. A 30-day free trial leads into a paid subscription.

Technical Highlights

Private by design, precise by construction

Privacy enforced by the build

A strict Content-Security-Policy means the app can’t send data anywhere except its own account service. Images and annotations are never uploaded or stored, and the offline cache holds only the app itself.

Honest about de-identification

Exports are redrawn from a canvas, so camera metadata, including GPS location, is stripped. The app never claims to de-identify an image and keeps a standing reminder to check for patient identifiers.

Regions, not strokes

Each shaded region is drawn on its own layer and blended once, so overlapping brush strokes give one even, translucent tint instead of dark blotches.

Sizes that follow the image

Positions are stored in original-image pixels and sizes as fractions of the image, so a label looks the same on a 512-pixel ultrasound frame and a 4000-pixel phone photo.

What you see is what you export

One renderer draws both the screen and the export, so the downloaded figure matches the screen exactly, minus the selection handles.

Built for phones and styluses

Two-finger pan and pinch-zoom, pen pressure, and palm rejection once a stylus is used. It installs like an app and keeps working offline for as long as the subscription runs.

Stack

Under the hood

Frontend	React + strict TypeScript + Vite, react-konva for layered drawing, perfect-freehand for pressure-aware strokes
Engine	A framework-free annotation engine, kept separate from the UI so it can be reused elsewhere
App shell	Installable PWA; the service worker caches only the app itself, never images
Accounts	Small plain-PHP API with MySQL: name, email and subscription dates only. Sign in with email or Google
Hosting	Shared hosting on Hostinger, at zill.datacraft.com.pk

Status

Where it stands

Live at zill.datacraft.com.pk since October 2026, with a 30-day free trial and monthly or annual plans. It was built in five phases, with unit tests that check real pixel output and end-to-end tests for the account service. Phone fixes and Google sign-in followed in mid-October.