obsidian-img2other/README.md

# Bulk Copy with Images - v3.5.0 🚀

一键复制 Obsidian 笔记全文或选中内容，优先导出 Obsidian 当前真实渲染结果，并将关键样式内联到 HTML 中。图片会自动压缩并内嵌为 base64，同时按目标平台做差异化适配。

当前主路径已升级为：`预览 DOM 导出 > 离屏渲染 > Markdown fallback`。

## ✨ 核心功能

### 🎯 一键平台适配（已优化）
- ✅ **微信公众号**：完全内联样式，完美兼容！图片宽度 900px
- ✅ **飞书文档**：完整样式支持，图片宽度 1000px
- ✅ **知乎**：代码高亮良好，图片宽度 800px
- ✅ **语雀**：样式完整，图片宽度 900px
- ✅ **智能参数优化**：自动应用平台最佳配置
- ✅ **兼容性提示**：提前告知哪些内容可能被平台过滤

### 🧠 导出架构（v3.5）
- ✅ **真实预览 DOM 优先**：默认不再以手写 Markdown 转 HTML 作为主路径
- ✅ **离屏渲染兜底**：在没有可用阅读视图，或复制选中内容时优先统一走离屏渲染
- ✅ **computed style 内联**：段落、标题、列表、引用、代码块、表格、图片等关键样式会固化到节点
- ✅ **平台能力模型**：微信、飞书、知乎、语雀使用不同的导出策略
- ✅ **Markdown fallback**：仅在 DOM 路径不可用时才退回旧转换逻辑

### 📱 微信公众号专项优化（v3.2 新功能）🔥

**问题解决**：微信公众号会过滤外部样式表，导致粘贴后没有样式。

**解决方案**：
- ✅ **完全内联样式**：所有样式直接写在 HTML 标签的 `style` 属性中
- ✅ **优化图片宽度**：900px，适合手机阅读
- ✅ **优化字体大小**：16px，符合公众号最佳实践
- ✅ **优化行高**：1.75，提升阅读体验
- ✅ **增强段落格式**：两端对齐，更专业
- ✅ **所有元素支持**：标题、列表、引用、代码块、表格等
- ✅ **图片完美显示**：base64 内嵌，无需外链

**效果对比**：
```
优化前：粘贴后是纯文字，没有样式 ❌
优化后：完美保留所有格式和样式 ✅
```

### ⚙️ 配置与平台切换
- ✅ **平台选择器**：复制时可直接选择目标平台
- ✅ **默认平台**：支持快速复制并自动套用默认预设
- ✅ **插件设置页**：可直接调整默认平台、图片宽度、压缩质量和常用开关
- ✅ **平台主题**：每个平台都可以单独设置导出主题样式，不再强依赖 Obsidian 当前主题
- ✅ **平台主题包**：内置公众号商务风、公众号极简风、知乎长文风、飞书团队文档风、语雀知识库风等主题包
- ✅ **推荐主题提示**：按平台给出推荐主题，帮助快速选择更合适的风格
- ✅ **自定义主题**：支持编辑“我的主题”，并分配给任意平台使用
- ✅ **多个自定义主题模板**：支持新增、切换和删除多个自定义主题，并分配给不同平台
- ✅ **复制当前主题**：支持基于当前自定义主题快速复制出一份副本继续调整
- ✅ **主题导出/导入与排序**：支持导出 JSON、导入主题，以及上移/下移调整自定义主题顺序
- ✅ **整套主题备份与恢复**：支持导出/导入全部自定义主题、顺序和当前编辑主题状态
- ✅ **主题搜索/筛选**：在自定义主题编辑器中可按名称快速筛选模板
- ✅ **专门的主题管理区**：自定义主题在设置页中以独立管理区呈现，便于集中管理模板
- ✅ **独立主题管理器**：可通过单独入口打开主题模板管理器，集中处理搜索、排序、导入导出与编辑
- ✅ **更正式的 JSON 导入导出**：使用专用 JSON 面板查看导出内容、粘贴导入内容并确认导入
- ✅ **两栏主题管理器**：左侧主题列表、右侧编辑区，便于在多个模板间快速切换和编辑
- ✅ **更清晰的编辑分区**：主题管理器右侧按搜索切换、模板管理、基础样式、颜色设置分区展示
- ✅ **右侧标签切换**：主题管理器右侧支持“基础 / 颜色 / 导入导出”切换，降低单屏信息密度
- ✅ **管理器内主题预览**：主题管理器右侧支持“预览”标签，编辑时可直接查看主题效果
- ✅ **预览平台切换**：可在主题管理器中切换微信/飞书/知乎/语雀容器查看同一主题效果
- ✅ **细节状态摘要**：预览标签会显示标题分隔线、表头底色、图片圆角、代码块边框的当前状态
- ✅ **独立细节标签**：主题管理器右侧支持“细节”标签，专门编辑四项主题细节开关
- ✅ **平台绑定摘要**：左侧主题列表会显示每个主题当前被哪些平台使用
- ✅ **颜色缩略预览**：左侧主题列表会展示主题的关键颜色缩略点
- ✅ **删除前确认提示**：删除正在被平台使用的主题时，会明确提示受影响平台并确认
- ✅ **使用中排序/筛选**：左侧主题列表支持“仅看使用中”和“使用中优先”
- ✅ **按平台推荐筛选**：左侧主题列表支持按当前预览平台的推荐主题进行筛选
- ✅ **左侧列表可折叠**：主题管理器支持折叠/展开左侧主题列表，聚焦右侧编辑区
- ✅ **推荐主题对比预览**：预览标签可展示当前主题与平台推荐主题的对比效果
- ✅ **并排对比布局**：当前主题与推荐主题在预览标签中左右并排展示，更方便直接比较
- ✅ **差异提示**：预览对比区会直接提示当前主题与推荐主题在细节开关上的不同
- ✅ **颜色差异提示**：预览对比区会列出当前主题与推荐主题在关键颜色上的不同
- ✅ **推荐徽标快捷预览**：点击左侧“推荐中”徽标可快速切换到对应平台预览
- ✅ **推荐主题一键应用**：可在预览对比区直接把推荐主题应用到当前预览平台
- ✅ **撤销推荐应用**：应用推荐主题后可一键撤销，恢复到应用前的平台主题状态
- ✅ **推荐使用徽标**：左侧主题列表会标记哪些主题正作为推荐主题被平台使用
- ✅ **恢复推荐主题**：每个平台都可以一键恢复到推荐主题，并清空局部主题细节覆盖
- ✅ **更直观的颜色编辑**：自定义主题支持颜色选择器和十六进制手动输入
- ✅ **更友好的主题控件**：字体支持常用预设，圆角和行高支持更直观的选择与输入
- ✅ **弹窗预览信息**：平台选择弹窗会显示当前主题、图片策略和图片参数
- ✅ **主题细节微调**：支持按平台控制标题分隔线、表头底色、图片圆角、代码块边框
- ✅ **各平台独立细调**：每个平台都可以分别配置自己的主题细节，而不共享同一套开关
- ✅ **设置页平台分组**：按平台折叠管理主题、图片策略和细节参数，并提供主题预览
- ✅ **更完整的主题预览**：预览区覆盖标题、正文、列表、行内代码、引用、表格、代码块和图片
- ✅ **平台容器模拟**：主题预览会模拟不同平台的容器宽度、背景和留白氛围
- ✅ **更清晰的设置页排版**：基础配置、当前平台、自定义主题、各平台配置和行为偏好分区展示

### 📱 完整 Markdown 语法支持
- ✅ **Wiki 链接**：支持 `[[link]]` 和 `[[link|text]]`
- ✅ **标签**：支持 `#tag` 带特殊样式
- ✅ **任务列表**：支持 `- [ ]` 和 `- [x]` 任务复选框
- ✅ **Callouts**：支持 `> [!type]` 调用框（info、warning、tip 等）
- ✅ **数学公式**：支持行内 `$formula$` 和块级 `$$formula$$`
- ✅ **标准 Markdown**：标题、列表、引用、代码块、表格、链接等

### 🎨 Obsidian 主题样式保留
- ✅ **自动检测主题**：自动识别当前使用的是亮色还是暗色主题
- ✅ **提取主题样式**：从 Obsidian 当前主题中提取关键颜色、边框和代码块背景等 token
- ✅ **CSS 变量支持**：读取 Obsidian 主题定义的 CSS 变量
- ✅ **尽量贴近预览效果**：复制后的内容尽可能接近 Obsidian 当前阅读视图
- ✅ **代码块基础保真**：优先保住背景、边距、字体和滚动行为

### 🔮 智能渲染引擎
- ✅ **预览视图优先**：优先从 Obsidian 阅读/预览视图提取真实 DOM
- ✅ **离屏渲染兜底**：没有可用预览 DOM 时，先渲染到临时容器再导出
- ✅ **DOM 级图片处理**：直接处理渲染后的 `<img>` 节点并内嵌图片
- ✅ **元素过滤**：自动移除 Obsidian 专属控件和无意义属性

### ⚡ 性能优化
- ✅ **并行图片处理**：批量处理多张图片，速度提升 80%
- ✅ **样式缓存**：避免重复计算，速度提升 90%
- ✅ **进度提示**：处理大量图片时显示实时进度

### 智能图片处理
- ✅ **自动压缩**：大图自动缩放到合适尺寸
- ✅ **质量优化**：在清晰度和文件大小间取得平衡
- ✅ **优先保清晰度**：PNG 截图等图片会尽量保留原格式，避免被统一转成模糊 JPEG
- ✅ **显示控制**：限制图片最大显示宽度，避免过长
- ✅ **格式自适应**：根据图片类型和平台策略决定是否保留原格式或转换
- ✅ **特殊处理**：
  - SVG：保持矢量格式
  - GIF：保留动画效果
  - PNG/JPG：智能压缩

## 📖 使用方法

### 🎯 方法 1：使用平台选择器（推荐）🔥

**每次复制时选择目标平台，确保最佳效果**

1. 打开任意 Markdown 笔记
2. 按 `Ctrl+Shift+C`（复制全文）或 `Ctrl+Shift+V`（复制选定内容）
3. **弹出平台选择框**：
   - 💬 微信公众号
   - 📝 飞书云文档
   - 💡 知乎
   - 📚 语雀
4. 选择你要复制到的平台
5. 点击"立即复制"
6. 粘贴到目标平台

**优势**：
- ✅ 每次都确保使用正确的样式
- ✅ 显示平台兼容性提示
- ✅ 直观易用，零学习成本

---

### ⚡ 方法 2：快速复制（使用默认平台）

**适合经常复制到同一个平台的用户**

1. 在设置中选择"默认平台"
2. 按 `Ctrl+Alt+C`（复制全文）或 `Ctrl+Alt+V`（复制选定内容）
3. 直接粘贴，无需选择平台

---

### 📋 方法 3：命令面板

1. 按 `Ctrl+P`（Windows/Linux）或 `Cmd+P`（Mac）
2. 输入"复制"
3. 选择命令：
   - "复制全文（选择平台）" - 选择平台后复制
   - "复制选定内容（选择平台）" - 选择平台后复制
   - "快速复制全文" - 使用默认平台
   - "快速复制选定内容" - 使用默认平台

---

### ⚙️ 方法 4：设置默认平台

1. 打开设置 → "Bulk Copy with Images"
2. 选择默认平台并按需调整图片参数与开关
3. 之后使用快捷键时自动应用该平台的样式

---

### ⌨️ 快捷键说明

| 快捷键 | 功能 | 说明 |
|--------|------|------|
| `Ctrl+Shift+C` | 复制全文（选择平台） | 每次复制时弹出平台选择框 |
| `Ctrl+Shift+V` | 复制选定内容（选择平台） | 每次复制时弹出平台选择框 |
| `Ctrl+Alt+C` | 快速复制全文 | 使用默认平台，无需选择 |
| `Ctrl+Alt+V` | 快速复制选定内容 | 使用默认平台，无需选择 |

### 使用场景

**场景 1：经常复制到不同平台**
- 使用 `Ctrl+Shift+C`，每次选择平台
- 确保每次都使用正确的样式

**场景 2：经常复制到同一平台**
- 在设置中设置默认平台
- 使用 `Ctrl+Alt+C` 快速复制
- 节省选择时间

---

## 🎨 平台选择器详解

### 界面展示

```
┌─────────────────────────────────────┐
│         📋 选择目标平台              │
│  选择你要复制到的平台，将自动应用最佳样式 │
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐ │
│  │ 💬  微信公众号              ✓  │ │
│  │ 适合微信公众号，图片宽度900px     │ │
│  │                                 │ │
│  │ ℹ️ 代码块使用截图效果最佳        │ │
│  │ ℹ️ 表格可能显示异常             │ │
│  └─────────────────────────────────┘ │
│                                     │
│  ┌─────────────────────────────────┐ │
│  │ 📝  飞书云文档                  │ │
│  │ 适合飞书文档，图片宽度1000px    │ │
│  │                                 │ │
│  │ ℹ️ 支持完整的样式和代码高亮    │ │
│  │ ℹ️ 推荐使用此预设               │ │
│  └─────────────────────────────────┘ │
│                                     │
│  ┌─────────────────────────────────┐ │
│  │ 💡  知乎                        │ │
│  │ 适合知乎回答，图片宽度800px     │ │
│  └─────────────────────────────────┘ │
│                                     │
│  ┌─────────────────────────────────┐ │
│  │ 📚  语雀                        │ │
│  │ 适合语雀文档，图片宽度900px     │ │
│  └─────────────────────────────────┘ │
│                                     │
│         [取消]  [立即复制]            │
└─────────────────────────────────────┘
```

### 特性

- 🎯 **智能推荐**：显示平台特点和兼容性提示
- ✅ **一键选择**：点击即可选择平台
- 📊 **兼容性报告**：提前告知注意事项
- 🎨 **美观界面**：现代化的设计风格

## ⚙️ 配置说明

### 平台预设（无需手动配置）

| 平台 | 图片宽度 | 压缩质量 | 特点 |
|------|---------|---------|------|
| 微信公众号 | 900px | 0.85 | 强内联样式，callout / 表格会保守降级 |
| 飞书云文档 | 1000px | 0.85 | 完整样式，推荐使用 |
| 知乎 | 800px | 0.8 | 代码高亮支持良好 |
| 语雀 | 900px | 0.8 | 样式完整，推荐使用 |

### 高级配置

当前版本优先通过插件设置页调整；更底层的细节仍可通过 `main.js` 顶部的 `USER_CONFIG` 和 `IMAGE_CONFIG` 调整。

如果你更关注图片清晰度，建议优先：
- 将图片压缩质量设置到 `0.9` 以上
- 保持 `imageFormat: 'auto'`
- 仅在确实需要控制体积时再降低图片宽度

每个平台都可以单独设置图片导出策略，建议如下：
- `高清优先`：适合代码截图、界面截图、带文字的 PNG 图片
- `平衡`：适合日常文档复制
- `体积优先`：适合图片很多、目标平台体积限制严格的场景

## 🎯 图片优化说明

### 当前配置

```javascript
// 实际值会受当前平台预设和插件设置影响
const IMAGE_CONFIG = {
  MAX_WIDTH: 1000,
  QUALITY: 0.85,
  DISPLAY_MAX_WIDTH: 800
};
```

### 参数说明

#### 1. `MAX_WIDTH` - 压缩最大宽度
- **作用**：超过此宽度的图片会被等比缩放
- **默认值**：取决于当前平台预设，飞书默认 1000px
- **建议值**：
  - 微信公众号：900px
  - 飞书文档：1000px
  - 知乎：800px
  - 如果图片需要更清晰：1200px
  - 如果想要更小的文件：600px

#### 2. `QUALITY` - 压缩质量
- **作用**：控制 JPEG 压缩质量
- **默认值**：取决于当前平台预设，常用值为 0.8-0.85
- **建议值**：
  - 高质量（文件较大）：0.85-0.9
  - 平衡模式（推荐）：0.75-0.85
  - 高压缩（文件小，质量降低）：0.6-0.75

#### 3. `DISPLAY_MAX_WIDTH` - 显示最大宽度
- **作用**：导出 HTML 容器中的推荐显示宽度
- **默认值**：取决于当前平台预设
- **说明**：
  - 这个设置**不影响图片实际尺寸**
  - 只控制图片在编辑器中的显示宽度
  - 避免图片在编辑器中显得过长

### 如何自定义配置？

优先在插件设置页中修改；如果需要更底层的调整，可以编辑 `main.js` 文件开头的配置：

```javascript
const USER_CONFIG = {
  imageMaxWidth: 1000,
  imageQuality: 0.92,
  displayMaxWidth: 800
};
```

### 压缩效果对比

| 原始图片 | 压缩后 | 节省空间 |
|---------|--------|---------|
| 5MB, 3000x2000 | ~150KB | 97% |
| 2MB, 1920x1080 | ~80KB | 96% |
| 500KB, 800x600 | ~60KB | 88% |

## ⚙️ 配置说明

### 高级配置

在 `main.js` 文件顶部可以配置以下参数：

```javascript
const USER_CONFIG = {
  // 图片配置
  imageMaxWidth: 800,           // 图片压缩最大宽度
  imageQuality: 0.8,            // 压缩质量 (0-1)
  displayMaxWidth: 600,         // 显示最大宽度
  imageFormat: 'auto',          // 图片格式: auto/jpeg/png/webp
  compressGif: false,           // 是否压缩 GIF（false 保持动画）
  
  // 功能开关
  enableCodeHighlight: true,    // 启用代码高亮
  enableThemeStyles: true,      // 启用主题样式保留
  enableFrontmatter: false,     // 包含 Frontmatter
  enableProgressNotice: true,   // 显示进度提示
  
  // 性能配置
  parallelImageProcessing: true,  // 并行处理图片
  maxParallelImages: 5,           // 最大并行图片数
  themeStylesCache: true,         // 缓存主题样式
  
  // 导出配置
  includeFrontmatter: false,      // 包含 YAML 前置内容
  clipboardFormats: ['text/html', 'text/plain'],  // 剪贴板格式
};
```

### 性能优化建议

**大量图片处理**：
- 启用 `parallelImageProcessing: true` 并行处理
- 增加 `maxParallelImages` 到 8-10（根据设备性能）
- 启用 `enableProgressNotice: true` 查看进度

**大文档处理**：
- 启用 `themeStylesCache: true` 缓存样式
- 减少图片数量或压缩质量

**快速复制**：
- 降低 `imageQuality` 到 0.6-0.7
- 降低 `imageMaxWidth` 到 600-700

## 📖 使用方法

### 方法 1：快捷键
1. 打开任意 Markdown 笔记
2. 按 `Ctrl+Shift+C`（Windows/Linux）或 `Cmd+Shift+C`（Mac）复制全文
3. 或者选择部分内容后按 `Ctrl+Shift+V`（Windows/Linux）或 `Cmd+Shift+V`（Mac）复制选定内容
4. 粘贴到目标编辑器

### 方法 2：命令面板
1. 按 `Ctrl+P`（Windows/Linux）或 `Cmd+P`（Mac）
2. 输入"复制"
3. 选择相应的命令：
   - "复制全文（选择平台）" - 复制整个文档
   - "复制选定内容（选择平台）" - 仅复制选中的内容
   - "快速复制全文（使用默认平台）"
   - "快速复制选定内容（使用默认平台）"
4. 粘贴到目标编辑器

## 💡 使用技巧

### 1. 不同平台的建议配置

优先直接使用内置平台预设：

- 微信公众号：更强的内联样式和保守降级
- 飞书云文档：高保真导出，推荐默认使用
- 知乎：在样式保真和兼容性之间取平衡
- 语雀：接近飞书，但更保守一些

### 2. 图片过大怎么办？

如果复制后提示"图片太大"或粘贴失败：
1. 降低 `MAX_WIDTH`（如改为 600 或 700）
2. 降低 `QUALITY`（如改为 0.7）
3. 或者将大图片分开发送

### 3. 图片不够清晰？

如果复制后图片显示模糊：
1. 提高 `MAX_WIDTH`（如改为 1000 或 1200）
2. 提高 `QUALITY`（如改为 0.85 或 0.9）

## 🔧 技术细节

### 图片处理流程

1. **读取图片** → 2. **判断格式** → 3. **压缩处理** → 4. **Base64 编码** → 5. **生成 HTML**

### 特殊格式处理

- **SVG**：保持矢量格式，不压缩
- **GIF**：保留动画，不压缩
- **PNG/JPG/WebP**：转为 JPEG 并压缩
- **其他格式**：尝试压缩，失败则保持原样

### 为什么转为 JPEG？

- JPEG 压缩率高（文件更小）
- 兼容性好（所有平台都支持）
- 对于照片和复杂图片效果最好

## ❓ 常见问题

### Q: 为什么有些平台粘贴后样式消失了？
A: 某些平台会过滤样式。插件已使用内联样式来提高兼容性。

### Q: 图片太小/太大怎么办？
A: 调整 `displayMaxWidth`、`imageMaxWidth` 和对应平台预设参数。

### Q: 压缩会影响图片清晰度吗？
A: 会有轻微影响，但肉眼难以察觉。可以通过提高 `QUALITY` 来改善。

### Q: 支持哪些图片格式？
A: PNG, JPG, JPEG, GIF, WebP, SVG, BMP, TIFF 等常见格式。

### Q: 动图会变成静态图吗？
A: 不会，GIF 动图会保留动画效果。

### Q: 某些块的样式仍然不完整怎么办？
A:

1. 优先在阅读视图下复制，让插件直接导出真实预览 DOM
2. 如果是选中内容，插件会优先走离屏渲染；复杂块仍可能被平台过滤
3. 微信公众号对表格、复杂代码块、数学公式本身就更严格，建议接受保守降级
4. 查看控制台中的 `[bulk-copy]` 日志，确认本次复制走的是 `preview-dom`、`offscreen-render` 还是 `markdown-fallback`

### Q: 在某些平台粘贴后格式丢失？
A: 
1. 使用 `Ctrl+Shift+V`（纯文本粘贴）可能会丢失格式
2. 应该使用 `Ctrl+V`（富文本粘贴）
3. 某些平台（如 Notion）有特殊的粘贴处理，可能需要多试几次
4. 微信公众号建议在新版编辑器中使用

## 📋 支持的 Markdown 语法清单

以下所有语法都会被正确转换为 HTML：

### 标题
```
# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题
```

### 文本格式
```
**粗体文本**
*斜体文本*
***粗斜体***
~~删除线~~
==高亮文本==
```

### 列表
```
- 无序列表项 1
- 无序列表项 2
  
1. 有序列表项 1
2. 有序列表项 2
```

### 引用
```
> 这是一段引用
> 可以有多行
```

### 代码
```
`行内代码`

\```javascript
// 代码块
function hello() {
  console.log("Hello!");
}
\```
```

### 表格
```
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |
```

### 链接和图片
```
[链接文本](https://example.com)
![图片描述](图片路径.png)
![[Obsidian 图片语法.png]]
```

### 分割线
```
---
***
___
```

## 🎨 转换示例

### 输入（Markdown）
```
## 测试文档

这是一段**粗体**文本和*斜体*文本。

- 列表项 1
- 列表项 2

> 这是引用内容

代码示例：`console.log("Hello")`

![图片](image.png)
```

### 输出（HTML）
所有格式和图片都会完美保留，可以直接粘贴到任何富文本编辑器！

## 📝 更新日志

### v3.5.0
- ✅ 导出主路径升级为 `预览 DOM 导出 > 离屏渲染 > Markdown fallback`
- ✅ 新增 DOM 清洗、样式内联、平台适配、DOM 级图片内联和独立剪贴板写入层
- ✅ `markdownToHtml()` 降级为兜底逻辑，不再作为默认主路径
- ✅ 微信公众号、飞书、知乎、语雀预设升级为能力模型
- ✅ 图片导出策略改为优先保清晰度，减少不必要的 JPEG 转码和过度压缩
- ✅ README 与 manifest 描述同步到当前实现

### 历史版本
- 早期版本主要围绕图片内嵌、Markdown 转 HTML、平台兼容和稳定性修复逐步演进。

## 📄 许可证

MIT License

## 🙋 反馈与支持

如有问题或建议，欢迎反馈！