Editing Images

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

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

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