Web 开发中处理图片时用…

在 Web 开发中需要调整、转换、优化图片或生成缩略图/OG 卡片时，优先用 img-process，复杂需求生成 Pillow 脚本。

适用场景

解决思路

1. 常用操作调用 `img-process`（位于 `bin/`）；复杂或自定义工作流生成适配用户环境的 Pillow 脚本。
2. 使用 `img-process resize hero.png --width 1920` 缩放图片。
3. 使用 `img-process convert logo.png --format webp` 转换格式。
4. 使用 `img-process trim logo-raw.jpg -o logo-clean.png --padding 10` 裁剪白边。
5. 使用 `img-process thumbnail photo.jpg --size 200` 生成缩略图。
6. 使用 `img-process optimise hero.jpg --quality 85 --max-width 1920` 优化图片。
7. 使用 `img-process og-card -o og.png --title "My App" --subtitle "Built for speed"` 生成 OG 卡片。
8. 使用 `img-process batch ./images --action convert --format webp -o ./optimised` 批量处理。
9. 当操作是标准操作（resize、convert、trim、thumbnail、optimise、OG card、batch）时，使用 `img-process`，避免每次生成脚本。
10. 当操作需要 `img-process` 未覆盖的逻辑（合成多张图片、水印、复杂文字布局、条件处理）时，生成自定义 Pillow 脚本。
11. 安装依赖：`pip install Pillow`；`img-process` 和自定义脚本都需要 Pillow。
12. Pillow 不可用时，在 macOS 使用内置 `sips`，适合 resize、convert，不支持 trim/OG。
13. Pillow 不可用时，在 Node.js 使用 `sharp`，安装 `npm install sharp`，功能全、性能高。
14. Pillow 不可用时，跨平台使用 `ffmpeg`，安装 `brew install ffmpeg`，适合 resize、convert。
15. 按用途选择输出格式：照片、hero 图用 WebP，因为压缩最好且浏览器支持广。
16. 按用途选择输出格式：需要透明度的 logo、图标用 PNG，因为无损且支持 alpha。
17. 按用途选择输出格式：旧浏览器回退用 JPG，因为通用支持。
18. 按用途选择输出格式：缩略图用 WebP 或 JPG，优先小文件体积。
19. 按用途选择输出格式：OG 卡片用 PNG，因为社交平台对 PNG 处理最好。
20. 保存图片时按扩展名设置不同质量参数：先创建输出目录。
21. 保存 WebP 时使用 `quality`（默认 85）和 `method=6`。
22. 保存 JPG/JPEG 时使用 `quality`（默认 90）和 `optimize=True`；如果图像是 RGBA，先合成到白色背景再保存，因为 JPG 不支持透明。
23. 保存 PNG 时使用 `optimize=True`。
24. 缩放图片时保持宽高比：同时给 width 和 height 就直接 `img.resize((width, height), Image.LANCZOS)`。
25. 只给 width 时计算 `ratio = width / img.width`，再 `img.resize((width, int(img.height * ratio)), Image.LANCZOS)`。
26. 只给 height 时计算 `ratio = height / img.height`，再 `img.resize((int(img.width * ratio), height), Image.LANCZOS)`。
27. 都不给则返回原图。
28. 去除白边/自动裁剪：将图片转换为 RGBA，调用 `img.getbbox()` 获取非零像素边界，若有 bbox 则 `img.crop(bbox)`。
29. 生成缩略图：使用 `img.thumbnail((size, size), Image.LANCZOS)`，在最大尺寸内保持宽高比。
30. Web 优化：一步完成缩放和压缩，转成 WebP；典型设置为宽度 1920、质量 85。
31. 跨平台查找字体：依次尝试 macOS、Linux、Windows 的字体路径，路径存在则 `ImageFont.truetype(path, size)`，异常则继续；全部失败用 `ImageFont.load_default()`；Linux 可用 `fc-list` 动态发现字体。
32. 生成 1200x630 OG 卡片：背景使用图片并 resize 到 1200x630，或使用纯色 `Image.new("RGB", (width, height), bg_color or "#1a1a2e")`。
33. OG 卡片叠加半透明黑色遮罩 `Image.new("RGBA", (width, height), (0, 0, 0, 128))`，用 `Image.alpha_composite` 提高文字可读性。
34. OG 卡片用 `ImageDraw` 绘制文字，标题字体大小 48、副标题 24；用 `draw.textbbox((0, 0), title, font=font_title)` 计算宽度后水平居中，填充白色；最后转回 RGB。
35. Logo 清理工作流：`img-process trim logo-raw.jpg -o logo-trimmed.png --padding 10`，然后 `img-process thumbnail logo-trimmed.png --size 512 -o favicon-512.png`。
36. 生产 hero 图工作流：`img-process optimise hero.jpg --max-width 1920 --quality 85`，输出 `hero.webp`。
37. 批量转格式：`img-process batch ./raw-images --action convert --format webp --quality 85 -o ./optimised`。
38. 批量缩放：`img-process batch ./photos --action resize --width 800 -o ./thumbnails`。
39. 与 Gemini 图像生成管线配合：先用 gemini-image-gen 技能生成图片，再 `img-process optimise generated-image.png --max-width 1920 --quality 85`。
40. 与 Gemini 图像生成管线配合批量优化：`img-process batch ./generated --action optimise -o ./production`。

适用边界 · 注意事项

• 当操作是 `img-process` 不覆盖的复杂逻辑（合成多张图片、水印、复杂文字布局、条件处理）时，不要只依赖 `img-process`，应生成自定义 Pillow 脚本。
• 当无法安装 Pillow 且替代工具不满足所需能力时（如 macOS `sips` 不支持 trim/OG 卡片）不适用。
• 当环境不是 Claude Code / 无法使用随技能提供的 `img-process` 且又不能生成等价脚本时，不适用。