Image Annotator

English | 简体中文

Image Annotator adds a focused annotation workspace to Obsidian. Open an image from its context menu, add visual notes, and save a flattened PNG beside the source file.

Features

• Draw rectangles, arrows, freehand marks, multiline text, numbered markers, solid redactions, and translucent highlights.
• Select, move, resize, recolor, and delete individual annotations. Double-click text or a numbered marker with the select tool to edit its content.
• Remember the last color, line width, and text size; pick from six color swatches.
• Zoom, fit to window, view at actual size, and pan with Space-drag or the middle mouse button, or use the hand button on touchscreens. Ctrl/Cmd+wheel zooms around the pointer.
• Undo and redo annotation changes.
• Save a PNG and editable annotation data beside the source image, then reopen the PNG to continue editing individual annotations.
• Copy a flattened PNG to the clipboard where image clipboard access is available.
• Replace one chosen image embed or all matching embeds in the current note.
• Confirm before discarding unsaved changes; prevent duplicate and conflicting saves.

The first save leaves the original image untouched and creates <original-name>-annotated.png. Opening an existing -annotated.png derivative and saving it updates that derivative. Files created by earlier versions with the -标注.png suffix remain supported and are updated in place.

Each editable PNG has a companion <image>.png.annotator.json file containing an immutable base-image snapshot and annotation objects. Keep both files to continue editing. Renaming or moving a PNG in Obsidian while the plugin is enabled also moves its companion file. When moving files outside Obsidian, move both files and keep their names paired. Changing the original source image does not affect the saved snapshot. An externally changed PNG or invalid companion file is rejected instead of silently restoring stale annotations.

Old flattened PNGs remain usable as backgrounds; annotations already baked into their pixels cannot be recovered as individual objects.

Usage

1. Right-click a supported image in the file explorer or an image embed.
2. Select Annotate image.
3. Add annotations and select the save button.
4. Keep the original embed, replace the selected occurrence, or replace all matches.

Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes, Ctrl/Cmd+S saves, and Delete removes a selected annotation. Escape prompts before discarding changes.

Supported source formats are PNG, JPEG, WebP, GIF, and BMP. Exports are PNG files. Animated images are flattened to the frame displayed when opened.

Privacy

Image Annotator works entirely inside your vault. It does not use the network, collect telemetry, or access files outside the vault.

The companion JSON contains the original, unredacted base image. Share only the flattened PNG or the copied image when sharing redacted content. Clipboard output contains neither editable objects nor the base-image snapshot.

Languages

The interface follows Obsidian's language automatically. Chinese is shown for Chinese locales; all other locales use English.

Manual installation

Download main.js, manifest.json, and styles.css from the latest release and place them in:

<vault>/.obsidian/plugins/image-annotator/

Reload Obsidian and enable Image Annotator under Community plugins.

Development

npm install
npm run build
npm run lint
npx playwright install chromium
npm test

Build output is written to dist/. Browser regression tests cover drawing, editing, clipboard pixels, persistence, write failures, reference replacement, and desktop/mobile layouts. QA screenshots are written to work/qa/.

License

MIT