editing-images

name	editing-images
description	Image editing using Sharp. Supports compositing (QR codes, logos, watermarks), resizing, cropping, rotating, flipping, brightness/contrast/saturation adjustment, blur, sharpen. 图片编辑、图片合成、添加二维码、添加Logo、添加水印、图片缩放、图片裁剪、图片旋转、图片翻转、亮度对比度饱和度调整、模糊、锐化。

Image Editing with Sharp

Performs image editing using the Sharp library for high-performance image processing.

When to Use

Use this skill when:

• Compositing images (adding QR codes, logos, watermarks to posters)
• Resizing or cropping images
• Rotating or flipping images
• Adjusting brightness, contrast, saturation
• Applying blur or sharpening effects
• Getting image metadata (dimensions, format)

Available Tools

Tool	Purpose
compositeImages	Overlay images onto a base image
resizeImage	Resize, crop, or extend images
transformImage	Rotate, flip images
adjustImage	Brightness, saturation, blur, sharpen
getImageMetadata	Get image dimensions and format info

Workflow

Step 1: Get Image Information (Recommended)

Call getImageMetadata first to understand the base image dimensions for accurate positioning.

Step 2: Perform Editing

Use the appropriate tool based on the task.

Step 3: Return Results

Return the output image URL to the user.

Common Use Cases

Case 1: Add QR Code to Poster (Bottom-Right Corner)

{
  "base": "https://example.com/poster.jpg",
  "layers": [{
    "input": "https://example.com/qrcode.png",
    "resize": { "width": 150, "height": 150 },
    "gravity": "southeast"
  }]
}

Case 2: Add Logo Watermark (Absolute Position)

{
  "base": "https://example.com/photo.jpg",
  "layers": [{
    "input": "https://example.com/logo.png",
    "resize": { "scale": 0.5 },
    "top": 20,
    "left": 20,
    "opacity": 0.7
  }]
}

Case 3: Resize for Social Media

{
  "input": "https://example.com/image.jpg",
  "width": 1080,
  "height": 1080,
  "fit": "cover"
}

Case 4: Create Thumbnail

{
  "input": "https://example.com/image.jpg",
  "width": 200,
  "height": 200,
  "fit": "cover"
}

Positioning Modes (Mutually Exclusive)

IMPORTANT: gravity and top/left are mutually exclusive. Do NOT mix them.

Mode A: Gravity Anchor Positioning

Use gravity alone to place layer at predefined anchor points:

northwest |  north   | northeast
----------+----------+----------
   west   |  center  |   east
----------+----------+----------
southwest |  south   | southeast

Example: { "gravity": "southeast" } → bottom-right corner

Mode B: Absolute Coordinates

Use top + left together for precise pixel positioning:

(0,0)────────────────────→ X (left)
  │
  │    ┌─────────┐
  │    │  layer  │ ← top=100, left=200
  │    └─────────┘
  ↓
  Y (top)

Example: { "top": 100, "left": 200 } → exact pixel position

Layer Resize Options

• resize.width / resize.height: Target dimensions in pixels
• resize.scale: Scale factor (e.g., 0.5 = half size, 2 = double size)
• resize.fit: Resize mode (contain, cover, fill, inside, outside)

Fit Modes for Resize

Mode	Behavior
cover	Crop to fill exact dimensions (default)
contain	Fit within bounds, may add padding
fill	Stretch to exact size (may distort)
inside	Fit within bounds, no upscaling
outside	Cover bounds, may exceed dimensions

Important Notes

• All image inputs must be valid HTTP/HTTPS URLs
• Maximum image size: 50MB
• Output images are PNG format
• For compositing, process layers in order (first layer = bottom)
• Opacity only affects the overlay layer, not the base