obsidian-image-copu/README.md

206 lines
5.3 KiB
Markdown
Raw Normal View History

# Bulk Copy with Images - 图片优化增强版
一键复制 Obsidian 笔记全文,自动转换为富文本 HTML图片内嵌为 base64。完美支持飞书云文档、微信公众号、知乎等多种编辑器平台。
## ✨ 核心功能
### 1. 完整的排版保留
- ✅ 标题H1-H6
- ✅ 粗体、斜体、删除线、高亮
- ✅ 代码块和行内代码
- ✅ 列表(有序、无序)
- ✅ 引用块
- ✅ 表格
- ✅ 链接
- ✅ 分割线
### 2. 智能图片处理
-**自动压缩**:大图自动缩放到合适尺寸
-**质量优化**:在清晰度和文件大小间取得平衡
-**显示控制**:限制图片最大显示宽度,避免过长
-**格式转换**:统一转为 JPEG 格式(压缩率更高)
-**特殊处理**
- SVG保持矢量格式
- GIF保留动画效果
- PNG/JPG智能压缩
### 3. 多平台兼容
- 飞书云文档 ✅
- 微信公众号 ✅
- 知乎 ✅
- 语雀 ✅
- Notion ✅
- 其他富文本编辑器 ✅
## 🎯 图片优化说明
### 当前配置
```javascript
const IMAGE_CONFIG = {
MAX_WIDTH: 800, // 压缩最大宽度(像素)
QUALITY: 0.8, // 压缩质量0-1
DISPLAY_MAX_WIDTH: 600 // 显示最大宽度(像素)
};
```
### 参数说明
#### 1. `MAX_WIDTH` - 压缩最大宽度
- **作用**:超过此宽度的图片会被等比缩放
- **默认值**800px
- **建议值**
- 微信公众号800px推荐
- 飞书文档1000px
- 知乎800px
- 如果图片需要更清晰1200px
- 如果想要更小的文件600px
#### 2. `QUALITY` - 压缩质量
- **作用**:控制 JPEG 压缩质量
- **默认值**0.880%
- **建议值**
- 高质量文件较大0.85-0.9
- 平衡模式推荐0.75-0.85
- 高压缩文件小质量降低0.6-0.75
#### 3. `DISPLAY_MAX_WIDTH` - 显示最大宽度
- **作用**:图片在编辑器中的最大显示宽度
- **默认值**600px
- **说明**
- 这个设置**不影响图片实际尺寸**
- 只控制图片在编辑器中的显示宽度
- 避免图片在编辑器中显得过长
### 如何自定义配置?
打开 `main.js`,修改文件开头的配置:
```javascript
/* ========== 图片优化配置 ========== */
const IMAGE_CONFIG = {
MAX_WIDTH: 800, // 改成你想要的压缩宽度
QUALITY: 0.8, // 改成你想要的质量0-1
DISPLAY_MAX_WIDTH: 600 // 改成你想要的显示宽度
};
```
### 压缩效果对比
| 原始图片 | 压缩后 | 节省空间 |
|---------|--------|---------|
| 5MB, 3000x2000 | ~150KB | 97% |
| 2MB, 1920x1080 | ~80KB | 96% |
| 500KB, 800x600 | ~60KB | 88% |
## 📖 使用方法
### 方法 1快捷键
1. 打开任意 Markdown 笔记
2.`Ctrl+Shift+C`Windows/Linux`Cmd+Shift+C`Mac
3. 粘贴到目标编辑器
### 方法 2命令面板
1.`Ctrl+P`Windows/Linux`Cmd+P`Mac
2. 输入"复制全文"
3. 选择"复制全文并内嵌本地图片"
4. 粘贴到目标编辑器
## 💡 使用技巧
### 1. 不同平台的建议配置
**微信公众号**(推荐当前配置)
```javascript
MAX_WIDTH: 800
QUALITY: 0.8
DISPLAY_MAX_WIDTH: 600
```
**飞书云文档**(可以更高清)
```javascript
MAX_WIDTH: 1000
QUALITY: 0.85
DISPLAY_MAX_WIDTH: 700
```
**知乎**(兼顾质量和加载速度)
```javascript
MAX_WIDTH: 800
QUALITY: 0.8
DISPLAY_MAX_WIDTH: 600
```
### 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: 调整 `DISPLAY_MAX_WIDTH` 参数。
### Q: 压缩会影响图片清晰度吗?
A: 会有轻微影响,但肉眼难以察觉。可以通过提高 `QUALITY` 来改善。
### Q: 支持哪些图片格式?
A: PNG, JPG, JPEG, GIF, WebP, SVG, BMP, TIFF 等常见格式。
### Q: 动图会变成静态图吗?
A: 不会GIF 动图会保留动画效果。
## 📝 更新日志
### v2.0.0 (2024)
- ✨ 新增图片智能压缩功能
- ✨ 新增图片尺寸限制
- ✨ 新增可自定义配置
- ✨ 优化表格支持
- ✨ 改进 Markdown 转 HTML 转换
- 🐛 修复图片过大导致复制失败的问题
- 🐛 修复部分平台样式不兼容的问题
### v1.0.0
- 🎉 初始版本
- ✅ 基本的图片内嵌功能
## 📄 许可证
MIT License
## 🙋 反馈与支持
如有问题或建议,欢迎反馈!