Image Tagging Tool (ITT)

A simple browser-based tool for placing and managing labeled points on an image.

It is useful for tagging diagrams/maps and exporting the result as JSON.

What it does

• Loads a background image and lets you click to create position markers.
• Supports optional label prefix auto-numbering (for example Pos, Pos1, Pos2, ...).
• Supports optional name assignment per marker from a names list.
• Prevents duplicate assigned names across markers (unless unchanged on the same marker).
• Lets you drag markers to adjust coordinates.
• Lets you delete markers.
• Shows a live JSON output log with:
  • imageName
  • namesList
  • positions
• Can copy JSON to clipboard.
• Can clear all positions.
• Can download the output JSON as _positions.json.
• Can load an existing positions JSON and render all markers.

Project structure

• index.html — Main UI.
• src/scripts.js — Core logic (loading files, marker interactions, export/import).
• images/ — Image files.
• names_list/default_list — Optional default names file.
• positions/_positions.json — Optional default saved positions.

Quick start

Option 1: Open directly

Open index.html in your browser.

Note: when opened with file://, browsers block auto-loading local files for security reasons. You can still use Load Image, Load Names, and Load Positions buttons manually.

Option 2 (recommended): Run a local HTTP server

Serve the project folder with any local server, then open it in your browser. This enables automatic loading of:

• names_list/default_list
• positions/_positions.json

How to use

1. Open the app.
2. (Optional) Click Load Image to choose an image.
3. (Optional) Click Load Names to import names (JSON array, comma-separated, or line-separated text).
4. (Optional) Click Load Positions to load existing position data from JSON.
5. Click on the image to add a marker.
6. Edit marker name in the input near the marker.
7. Drag marker using the move button.
8. Delete marker using the trash button.
9. Use the right-side output area to:
   • Copy JSON,
   • Clear all markers,
   • Download JSON.
10. You can also paste/edit JSON in output-log and apply it:
    • by leaving the field (change event), or
    • with Ctrl+Enter / Cmd+Enter.

Data format (positions JSON)

The output uses this shape:

{
  "imageName": "your-image.png",
  "namesList": "names_file_name",
  "positions": {
    "1": { "label": "Pos", "x": 0.123, "y": 0.456, "name": "Example" }
  }
}

Notes:

• Coordinates are normalized in range [0, 1].
• Values are rounded to 3 decimals.
• name is optional.
• positions can be loaded either as the full wrapper object above or as a direct positions object.

Tips

• Keep marker labels short for readability.
• Keep names list unique for best assignment behavior.
• Use download regularly as a backup while tagging.

Image Preview