Skip to content

图片上传

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

功能特性

  • ✅ 图片格式转换: 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 图表生成: 自动生成 SVG 文件并更新 Markdown 文件中的图片标签。 ✅ 尺寸属性添加: 自动为生成的 SVG 图片添加 width/height 属性。

使用方法

基本用法

npm run transform-mermaid

强制模式

npm run transform-mermaid --force

工作流程

  1. 扫描 Markdown 文件: 检测所有包含 Mermaid 图表的代码块。
  2. 生成 SVG 文件: 根据 Mermaid 图表代码生成对应的 SVG 文件。
  3. 更新 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)

故障排除

常见错误

  1. rclone 未配置
❌ 上传失败：command not found: rclone

解决：安装并配置 rclone

  1. Chrome 路径错误
❌ SVG 转换失败：Chrome not found

解决：检查 scripts/svg2png.sh 中的 Chrome 路径

  1. 权限问题
❌ Permission denied

解决：chmod +x scripts/svg2png.sh

调试模式

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

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

扩展功能

可以根据需要修改脚本：

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

相关文件

  • scripts/upload-images.js - 主要脚本
  • scripts/svg2png.sh - SVG 转 PNG 工具