Overview
Introduction
This tool adds one or more labeled point annotations to a JPG entirely in your browser, useful for calling out several specific spots in a single image rather than one line of text.
Each marker consists of a small dot at the target point, a short leader line, and a readable text label using the same built-in bitmap font as the JPG Text Adder tool.
What Is JPG Annotator?
A client-side multi-marker annotation tool: you build up a list of (X, Y, label) entries, and the tool draws a dot, a connecting leader line, and the label text for every entry onto a clone of the source image.
It's the multi-point counterpart to the single-string JPG Text Adder: think of it as the difference between a caption and a set of callout labels on a diagram.
How JPG Annotator Works
For each marker, the tool draws a small filled circle at the exact (X, Y) point using a simple squared-distance test, then draws a straight leader line to a label position offset up and to the right using Bresenham's line algorithm, then stamps the label text at that offset using the shared bitmap-font renderer.
All markers are validated against the image's actual dimensions before drawing, so a marker placed outside the image bounds is caught with a clear error rather than silently clipped.
When To Use JPG Annotator
Use it to number defects in a QA screenshot, label parts in a product photo or diagram, or point out several details in a before/after comparison image.
It's a lighter-weight alternative to loading an image into a full editor just to add a handful of callout labels.
Often used alongside JPG Text Adder, JPG Region Highlighter and PNG Text Adder.
Features
Advantages
- Runs entirely client-side.
- Supports any number of markers up to 50 in one pass, each independently colored.
- Reuses the same bitmap font as the text adder and watermarker tools for visual consistency.
Limitations
- Marker placement is via typed coordinates, not live canvas clicking, so pinpointing an exact pixel requires estimating from the preview.
- Leader lines are always drawn in a fixed direction/offset relative to the marker point rather than being individually draggable.
Examples
Best Practices & Notes
Best Practices
- Keep labels short; long labels can run past the image edge if placed near a corner.
- Use distinct colors per marker category (e.g. red for problems, blue for notes) to make the annotated image scannable at a glance.
Developer Notes
annotateJpg validates every marker's coordinates and label up front before drawing anything, then for each marker draws a filled dot (squared-distance circle test), a Bresenham leader line, and a label via the shared stampBitmapText helper exported from jpg-text-adder.ts, all mutating a single cloned PixelBuffer so multiple markers compose correctly in one pass.
JPG Annotator Use Cases
- Visual QA callouts on a screenshot
- Labeling parts in a product or diagram photo
- Numbering steps directly on a reference image
Common Mistakes
- Placing a marker's coordinates outside the image's actual pixel dimensions, which the tool rejects with an error.
- Adding too many markers close together, causing leader lines and labels to overlap.
Tips
- Add markers one at a time and check the preview before adding the next, since there's no live click-to-place.
- For a single simple caption instead of multiple callouts, use JPG Text Adder; it's simpler for that case.