Image Viewer
一个功能强大的 VSCode 图片查看器扩展，支持缩放、拖拽、导航和图片标注功能。
功能特点
图片浏览
- 缩略图网格视图 - 一览所有图片
- 详情视图 - 单张大图查看，支持缩放和拖拽
- 多种扫描模式 - 当前文件夹 / 递归扫描 / Glob 模式过滤
- 快捷键导航 - 方向键或 q/e 切换图片
- 数字跳转 - 输入编号快速跳转到指定图片
图片标注
- 为图片添加标签/分类
- 自定义标签类别
- 按标签过滤浏览
- 标注数据持久化存储（保存在
.image-viewer/ 目录）
支持的格式
BMP, GIF, ICO, JPG, JPEG, PNG, SVG, WEBP, TIF, TIFF
使用方法
方式一：右键文件夹
- 在文件浏览器中右键点击文件夹
- 选择 "Open Folder in Image Browser"
- 选择扫描模式：
- Current folder only - 仅当前文件夹
- Recursive (all subfolders) - 递归扫描所有子文件夹
- Glob pattern filter - 使用 Glob 模式过滤（如
**/*_vis.jpg）
方式二：直接打开图片
直接点击图片文件，选择 "Image Viewer" 打开。
快捷键
| 快捷键 |
功能 |
← / → |
上一张 / 下一张 |
q / e |
上一张 / 下一张 |
0-9 |
数字输入，按 Enter 跳转 |
+ / - |
放大 / 缩小 |
| 鼠标滚轮 |
缩放 |
| 拖拽 |
移动图片 |
Esc |
返回缩略图视图 |
标注使用
- 在详情视图中，点击图片右侧的标签选择器
- 选择已有标签或输入新标签
- 标签会自动保存
- 使用顶部的过滤按钮按标签筛选图片
安装
从 VSCode Marketplace 安装
搜索 "Image Viewer" 并安装。
从 VSIX 安装
# 构建
npm install
npm run build
# 在 VSCode 中安装
# 命令面板 -> "Extensions: Install from VSIX" -> 选择生成的 .vsix 文件
开发
# 安装依赖
npm install
# 编译
npm run compile
# 监听模式
npm run watch
# 在 VSCode 中按 F5 启动调试
项目结构
vscode-image-viewer/
├── src/
│ └── extension.ts # 插件入口
├── media/
│ ├── thumbnails.html # 缩略图视图
│ └── detail.html # 详情视图
├── package.json # 插件配置
├── tsconfig.json # TypeScript 配置
└── README.md
数据存储
标注数据存储在图片所在文件夹的 .image-viewer/ 目录下：
annotations.txt - 图片标注数据（JSON Lines 格式）labels.txt - 标签定义列表
License
MIT
支持
如有问题或建议，请在 GitHub Issues 中提出。
