Image Tagging

Obsidian 图片标签插件

这是一个功能丰富的 Obsidian 插件，提供图片标签管理和图库视图功能。

功能特性

• 图片标签管理：为图片添加自定义标签，方便分类和检索
• 图库视图：可视化展示所有图片，支持网格布局
• 图片信息面板：在侧边栏查看和编辑图片的详细信息
• 搜索和过滤：通过标签或关键词快速查找图片
• 批量扫描：自动扫描库中的所有图片文件
• 页面图片提取：从当前页面提取所有图片并添加到标签系统
• SQLite 存储：使用 SQLite 数据库存储媒体信息，减少频繁 JSON 全量读写
• MD5 标识：以文件内容 MD5 作为记录 ID，重命名不会改变标签和描述

构建说明

插件已成功构建，生成的文件包括：

• main.js - 插件的主要 JavaScript 代码
• styles.css - 插件的样式文件
• manifest.json - 插件的元数据信息

安装方法

1. 将以下文件复制到您的 Obsidian 库的 .obsidian/plugins/ 目录下：

   • main.js
   • styles.css
   • manifest.json

2. 在 Obsidian 设置中启用插件

使用方法

1. 启用插件后，您可以通过命令面板 (Ctrl/Cmd+P) 访问以下功能：

   • "打开图片图库" - 打开可视化图库视图
   • "打开图片信息面板" - 打开侧边栏图片信息面板
   • "扫描库中的所有图片" - 扫描并索引库中的所有图片
   • "从当前页面提取图片" - 从当前页面提取图片并添加到标签系统

2. 在图库视图中，您可以：

   • 浏览所有图片
   • 按标签、标题或描述搜索图片
   • 查看图片详细信息
   • 添加或编辑标签

3. 当打开图片文件时，图片信息面板会自动显示该图片的详细信息，您可以编辑标题、描述和标签。

配置选项

• 旧 JSON 数据路径：仅用于首次升级时定位旧版本数据
• 支持的图片格式：自定义插件处理的图片文件格式
• 导入时自动添加标签：当新图片添加到库中时是否自动创建标签数据项
• 扫描指定文件夹：通过文件夹选择器挑选需要扫描的文件夹，可添加多个；未添加任何文件夹时扫描整个库

平台支持

插件同时支持 Obsidian 桌面端与移动端（Android / iOS）：

• 数据存储使用 sql.js 的 asm.js 构建（.obsidian/image-tags.db），不依赖桌面端原生模块，移动端同样可用
• 文件内容指纹使用纯 TypeScript 实现的 MD5，不依赖 Node 的 crypto / Buffer
• 「导出 JSON」在桌面端会弹出系统「另存为」对话框；移动端会写入库内文件
• 「导入 JSON」在桌面端会弹出系统「打开文件」对话框；移动端会从库内选择 JSON 文件
• 「用默认软件打开」为桌面端专属功能，移动端不显示该行为

数据迁移

当前版本将数据保存到 .obsidian/image-tags.db，插件首次启动时会自动读取设置中的旧 JSON 路径以及常见旧路径。迁移成功并完成 SQLite 写入后，旧 JSON 文件会被删除；迁移失败时不会删除源文件。

媒体记录的 ID 是文件内容的 MD5。文件重命名时 ID 保持不变；文件内容发生变化时，插件按原路径继承标签、标题和描述等数据，并为新内容生成新的 MD5 ID。

启动性能

• 插件启用时不再同步等待设置读取，界面先完成渲染，设置随后异步合并生效
• sql.js 初始化与数据库读取推迟到布局就绪后的浏览器空闲时机执行
• 仅注册一份 contextmenu 委托监听器，避免重复菜单与多余的启动开销

技术架构

此插件使用以下组件：

• 图片数据模型 (image-data-model.ts) - 管理图片元数据
• 图片信息视图 (image-info-view.ts) - 侧边栏信息面板
• 图库视图 (gallery-view.ts) - 主要的图库界面
• 选择器模态框 (suggest-modals.ts) - 文件夹 / 库内文件选择器，桌面端与移动端通用
• 平台工具 (platform.ts) - 收口桌面端与移动端的能力差异（Electron、fs、路径）
• 纯 TS MD5 (md5.ts) - 不依赖 Node 运行时计算文件内容指纹
• 样式文件 (styles.css) - 定制化界面样式