mcpField
I
image-processing

image-processing

github.com/jezweb创意与媒体1.1k2.4k 次安装3 周前更新
代码仓库

关于 image-processing

用于常见图像处理的技能，可通过 `img-process` 命令行工具执行标准操作，也可用 Pillow 编写自定义流程，适合开发者和设计师准备、优化及批量处理图像资源。

主要功能

  1. 01调整尺寸、格式转换与裁剪
  2. 02生成缩略图和 OG 卡片
  3. 03优化并批量处理图像资源
  4. 04生成自定义 Pillow 脚本
  5. 05提供图像格式与保存建议

适用场景

  1. 01清理 Logo 和图标
  2. 02准备压缩后的网页主图
  3. 03生成社交平台预览卡片
  4. 04批量转换或调整图像文件夹

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jezweb/claude-skills --skill image-processing

安装后在 Claude Code 中输入/image-processing确认已加载。

详细介绍

图像处理

使用 img-process（随 bin/ 一同提供）执行常见操作。对于复杂或自定义的工作流，请生成适配用户环境的 Pillow 脚本。

快速参考 — img-process CLI

img-process resize hero.png --width 1920
img-process convert logo.png --format webp
img-process trim logo-raw.jpg -o logo-clean.png --padding 10
img-process thumbnail photo.jpg --size 200
img-process optimise hero.jpg --quality 85 --max-width 1920
img-process og-card -o og.png --title "My App" --subtitle "Built for speed"
img-process batch ./images --action convert --format webp -o ./optimised

适合使用 img-process 的情况：操作属于标准类型（调整大小、转换格式、裁剪、生成缩略图、优化、OG 卡片、批量处理）。这样速度更快，也无需每次都生成脚本。

适合生成自定义脚本的情况：操作需要 img-process 不支持的逻辑（合成多张图像、添加水印、复杂的文本排版、条件处理）。

先决条件

img-process 和自定义脚本都需要 Pillow：

pip install Pillow

如果无法使用 Pillow，请采用以下替代工具：

替代工具平台安装适用于
sipsmacOS（内置）无调整大小、转换格式（不支持裁剪/OG）
sharpNode.jsnpm install sharp功能全面、性能出色
ffmpeg跨平台brew install ffmpeg调整大小、转换格式

输出格式指南

用途格式原因
照片、主视觉图像WebP压缩效果最佳，浏览器支持广泛
Logo、图标（需要透明度）PNG无损，支持 alpha
兼容旧版浏览器JPG通用支持
缩略图WebP 或 JPG优先考虑较小的文件体积
OG 卡片PNG社交平台对 PNG 的支持最佳

核心模式

使用特定格式的质量参数保存

不同格式需要不同的保存参数。始终妥善处理 RGBA 到 JPG 的合成——JPG 不支持透明度，因此请先将图像合成到白色背景上。

from PIL import Image
import os

def save_image(img, output_path, quality=None):
    os.makedirs(os.path.dirname(output_path) or ".", exist_ok=True)
    kwargs = {}
    ext = output_path.lower().rsplit(".", 1)[-1]

    if ext == "webp":
        kwargs = {"quality": quality or 85, "method": 6}
    elif ext in ("jpg", "jpeg"):
        kwargs = {"quality": quality or 90, "optimize": True}
        # RGBA → RGB: composite onto white background
        if img.mode == "RGBA":
            bg = Image.new("RGB", img.size, (255, 255, 255))
            bg.paste(img, mask=img.split()[3])
            img = bg
    elif ext == "png":
        kwargs = {"optimize": True}

    img.save(output_path, **kwargs)
按宽高比调整大小

只指定宽度或高度时，根据宽高比计算另一边的尺寸。使用 Image.LANCZOS 进行高质量缩小。

def resize_image(img, width=None, height=None):
    if width and height:
        return img.resize((width, height), Image.LANCZOS)
    elif width:
        ratio = width / img.width
        return img.resize((width, int(img.height * ratio)), Image.LANCZOS)
    elif height:
        ratio = height / img.height
        return img.resize((int(img.width * ratio), height), Image.LANCZOS)
    return img
裁剪空白（自动裁剪）

移除 Logo 和图标周围的空白。先转换为 RGBA，再使用 getbbox() 查找内容边界。

img = Image.open(input_path)
if img.mode != "RGBA":
    img = img.convert("RGBA")
bbox = img.getbbox()  # Bounding box of non-zero pixels
if bbox:
    img = img.crop(bbox)
缩略图

在保持宽高比的同时，将图像缩放到最大尺寸范围内：

img.thumbnail((size, size), Image.LANCZOS)
针对 Web 优化

一步完成调整大小和压缩。转换为 WebP，以获得最佳压缩效果。常用设置：宽度 1920，质量 85。

跨平台字体查找

系统字体路径因操作系统而异。尝试多个路径，若都不可用则回退到 Pillow 默认字体。在 Linux 上，可使用 fc-list 动态查找字体。

from PIL import ImageFont

def get_font(size):
    font_paths = [
        # macOS
        "/System/Library/Fonts/Helvetica.ttc",
        "/System/Library/Fonts/SFNSText.ttf",
        # Linux
        "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
        "/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf",
        # Windows
        "C:/Windows/Fonts/arial.ttf",
    ]
    for path in font_paths:
        if os.path.exists(path):
            try:
                return ImageFont.truetype(path, size)
            except Exception:
                continue
    return ImageFont.load_default()
生成 OG 卡片（1200x630）

在背景图像或纯色背景上合成文本。添加半透明叠层以提高文本可读性。文本水平居中。

from PIL import Image, ImageDraw, ImageFont

width, height = 1200, 630

# Background: image or solid colour
if background_path:
    img = Image.open(background_path).resize((width, height), Image.LANCZOS)
else:
    img = Image.new("RGB", (width, height), bg_color or "#1a1a2e")

# Semi-transparent overlay for text readability
overlay = Image.new("RGBA", (width, height), (0, 0, 0, 128))
img = img.convert("RGBA")
img = Image.alpha_composite(img, overlay)

draw = ImageDraw.Draw(img)
font_title = get_font(48)
font_sub = get_font(24)

# Centre title
if title:
    bbox = draw.textbbox((0, 0), title, font=font_title)
    tw = bbox[2] - bbox[0]
    draw.text(((width - tw) // 2, height // 2 - 60), title, fill="white", font=font_title)

img = img.convert("RGB")

常见工作流

清理 Logo（客户提供的白色背景 JPG）
img-process trim logo-raw.jpg -o logo-trimmed.png --padding 10
img-process thumbnail logo-trimmed.png --size 512 -o favicon-512.png
为生产环境准备主视觉图像
img-process optimise hero.jpg --max-width 1920 --quality 85
# Outputs hero.webp — resized and compressed
批量处理
img-process batch ./raw-images --action convert --format webp --quality 85 -o ./optimised
img-process batch ./photos --action resize --width 800 -o ./thumbnails
使用 Gemini Image Gen 的流水线

使用 gemini-image-gen 技能生成图像，然后对其进行处理：

# After generating with Gemini (raw PNG output):
img-process optimise generated-image.png --max-width 1920 --quality 85
# Or batch process all generated images:
img-process batch ./generated --action optimise -o ./production

评论

支持 Markdown