日本語のREADMEはこちら
ImageMarkPengent

A VSCode extension for intuitively drawing red circle marks and annotations directly on images.
Features
- Draw red circle marks directly on PNG/JPG images in VSCode
- Change mark color/line width, move, resize, delete, Undo/Redo
- Save as image (red marks merged at original image size)
- Intuitive UI and keyboard shortcuts
Screenshot

How to Use
1. Open an Image
- Right-click a PNG/JPG image in the Explorer →
Open in ImageMarkPengent
- Or run
ImageMarkPengent: Open in ImageMarkPengent from the Command Palette
2. Draw a Mark
- Click the "Add Mark" button (or Ctrl+drag)
- Drag on the image to draw a red circle
3. Edit Marks
- Click the "Select Mode" button to select a mark
- For the selected mark:
- Drag to move
- Drag the corner handles to resize
- Change color/line width from the toolbar
- Delete with the Delete key
- Undo (Ctrl+Z) and Redo (Ctrl+Y) are available
4. Save the Image
- Click the "Save" button
- Choose a file name and location; the image will be saved as PNG with red marks at the original size
- Move Mode: Scroll/zoom the image
- Select Mode: Select and edit marks
- Add Mark: Add a new red circle mark
- Line Width/Color: Change the mark's line width and color
- Save: Save the edited image
Keyboard Shortcuts
- Ctrl+drag: Temporarily add a mark
- Delete/Backspace: Delete selected mark
- Ctrl+Z: Undo
- Ctrl+Y: Redo
- Esc: Return to Move Mode
FAQ
- Q. Will the original image be overwritten?
- A. You can specify a new file name when saving. The original image is not changed.
- Q. Can I edit multiple marks at once?
- A. Multi-selection is not supported yet, but is planned for future updates.
Sample Image

Install & Build
- Install dependencies
yarn install
- Build
yarn compile
- Press F5 to launch in debug mode
License
MIT License
| |