2.5 KiB
2.5 KiB
ImageMarkPengent
VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。
主な特徴
- PNG/JPG画像をVSCode上で直接開いて赤丸マークを描画
- マークの色・太さ変更、移動、拡大縮小、削除、Undo/Redo
- 画像として保存（元画像サイズで赤マーク合成）
- 直感的なUI・ショートカット
スクリーンショット
使い方
1. 画像を開く
- エクスプローラーでPNG/JPG画像を右クリック →
Open in ImageMarkPengent - またはコマンドパレットで
ImageMarkPengent: Open in ImageMarkPengentを実行
2. マークを描く
- 「マーク追加」ボタンを押す（またはCtrlを押しながらドラッグ）
- 画像上でドラッグして赤丸を描画
3. マークの編集
- 「選択モード」ボタンでマークを選択
- 選択したマークは：
- ドラッグで移動
- 四隅のハンドルをドラッグで拡大縮小
- 色・太さをツールバーで変更
- Deleteキーで削除
- Undo（Ctrl+Z）、Redo（Ctrl+Y）も可能
4. 画像の保存
- 「保存」ボタンを押す
- ファイル名・保存先を選択し、元画像サイズで赤マーク付き画像をPNGで保存
ツールバーの説明
- 移動モード：画像のスクロールやズーム
- 選択モード：マークの選択・編集
- マーク追加：赤丸マークを新規追加
- 太さ・色：マークの線の太さ・色を変更
- 保存：加工画像を保存
ショートカット
- Ctrl+ドラッグ：一時的にマーク追加
- Delete/Backspace：選択中マーク削除
- Ctrl+Z：Undo（元に戻す）
- Ctrl+Y：Redo（やり直し）
- Esc：移動モードに戻る
よくある質問
- Q. 元画像は上書きされますか？
- A. 保存時は新しいファイル名を指定できます。元画像は変更されません。
- Q. 複数のマークを同時に編集できますか？
- A. 複数選択には未対応ですが、今後拡張予定です。
サンプル画像
インストール・ビルド
- 依存パッケージインストール
yarn install - ビルド
yarn compile - F5キーでデバッグ実行
ライセンス
MIT License