图片上传

本文档介绍如何使用自动化脚本优化博客中的图片处理流程。

功能特性¶

✅ 图片格式转换: PNG/JPG → WebP (压缩优化)
✅ SVG 处理: 自动生成 PNG 副本
✅ 云端上传: 自动上传到 Cloudflare R2
✅ 链接替换: 自动更新 Markdown 中的图片引用
✅ 尺寸属性: 自动添加 width/height 属性
✅ 本地清理: 自动删除本地冗余文件

安装依赖¶

首先安装所需的 Node.js 依赖：

npm install

确保系统已安装以下工具：

rclone: 用于上传到 Cloudflare R2
Google Chrome: 用于 SVG 转 PNG
ImageMagick: 用于图片处理

# macOS 安装
brew install rclone imagemagick

# 配置 rclone 连接到 Cloudflare R2
rclone config

使用方法¶

用法说明（简要）¶

脚本的默认检测策略和如何强制指定目录已集中说明在：

docs/workflows/upload-images-git-default.md（首选阅读）

简要：直接运行 npm run upload-images 会只处理 Git 更改集合中的文章；要强制处理某个目录，请传入目录参数（例如 npm run upload-images -- content/zh/blog/your-article）。

工作流程¶

1. 准备阶段¶

在 VS Code 中编辑 Markdown 文件，添加本地图片：

![示例图片](image.png)
![SVG 图表](diagram.svg)

2. 自动处理¶

运行脚本后，系统会自动：

🔍 检测图片: 扫描目录中的 PNG、JPG、WebP、SVG 文件
🖼️ 格式转换: PNG/JPG → WebP (最大宽度 1920px，质量 85%)
📊 SVG 处理: 生成对应的 PNG 文件
📤 云端上传: 上传所有图片到 Cloudflare R2
📝 更新引用: 替换 Markdown 中的本地路径为远程 URL
📏 添加属性: 自动添加图片尺寸属性
🧹 清理文件: 删除本地的 PNG/JPG/WebP 文件，保留 SVG

3. 结果¶

处理后的 Markdown 文件：

![示例图片](https://assets.jimmysong.io/images/blog/ambient-mesh-l4-traffic-path/image.webp)
{width=1200 height=800}

![SVG 图表](https://assets.jimmysong.io/images/blog/ambient-mesh-l4-traffic-path/diagram.svg)
{width=800 height=600}

Mermaid 图表处理¶

Mermaid 功能特性¶

✅ Mermaid 图表生成: 自动生成 SVG 文件并更新 Markdown 文件中的图片标签。 ✅ 尺寸属性添加: 自动为生成的 SVG 图片添加 width/height 属性。

Mermaid 使用方法¶

基本用法¶

npm run transform-mermaid

强制模式¶

npm run transform-mermaid --force

Mermaid 工作流程¶

扫描 Markdown 文件: 检测所有包含 Mermaid 图表的代码块。
生成 SVG 文件: 根据 Mermaid 图表代码生成对应的 SVG 文件。
更新 Markdown 文件: 替换或添加图片标签，确保包含尺寸属性。

示例¶

处理后的 Markdown 文件：

![Mermaid Diagram](example.svg)
{width=1920 height=1080}

目录结构要求¶

脚本要求博客目录结构如下：

content/
├── zh/blog/article-name/
│   ├── index.md          # 博客文章
│   ├── image1.png        # 本地图片（将被转换）
│   ├── image2.jpg        # 本地图片（将被转换）
│   └── diagram.svg       # SVG 图片（将保留）
└── en/blog/article-name/
    └── ...

注意事项¶

rclone 配置¶

确保 rclone 已正确配置 Cloudflare R2：

rclone config show r2

权限设置¶

确保脚本有执行权限：

chmod +x scripts/svg2png.sh

图片质量¶

WebP 转换质量设置为 85%，平衡文件大小和质量
图片宽度限制为 1920px，避免过大文件
SVG 转 PNG 使用高分辨率 (300 DPI)

故障排除¶

常见错误¶

rclone 未配置 - 命令未找到：
```
❌ 上传失败：command not found: rclone
```
解决：安装并配置 rclone
Chrome 路径错误 - SVG 转换失败：
```
❌ SVG 转换失败：Chrome not found
```
解决：检查 scripts/svg2png.sh 中的 Chrome 路径
权限问题 - 执行权限不足：
```
❌ Permission denied
```
解决：chmod +x scripts/svg2png.sh

调试模式¶

脚本会输出详细的处理日志，包括：

检测到的图片文件
转换过程状态
上传进度
更新的引用

扩展功能¶

可以根据需要修改脚本：

调整 WebP 质量设置
修改最大图片尺寸
添加其他图片格式支持
自定义上传路径