| 1 | --- |
| 2 | name: editing-images |
| 3 | description: Image editing using Sharp. Supports compositing (QR codes, logos, watermarks), resizing, cropping, rotating, flipping, brightness/contrast/saturation adjustment, blur, sharpen. 图片编辑、图片合成、添加二维码、添加Logo、添加水印、图片缩放、图片裁剪、图片旋转、图片翻转、亮度对比度饱和度调整、模糊、锐化。 |
| 4 | --- |
| 5 | |
| 6 | # Image Editing with Sharp |
| 7 | |
| 8 | Performs image editing using the Sharp library for high-performance image processing. |
| 9 | |
| 10 | ## When to Use |
| 11 | |
| 12 | Use this skill when: |
| 13 | |
| 14 | - Compositing images (adding QR codes, logos, watermarks to posters) |
| 15 | - Resizing or cropping images |
| 16 | - Rotating or flipping images |
| 17 | - Adjusting brightness, contrast, saturation |
| 18 | - Applying blur or sharpening effects |
| 19 | - Getting image metadata (dimensions, format) |
| 20 | |
| 21 | ## Available Tools |
| 22 | |
| 23 | | Tool | Purpose | |
| 24 | | ------------------ | ------------------------------------- | |
| 25 | | `compositeImages` | Overlay images onto a base image | |
| 26 | | `resizeImage` | Resize, crop, or extend images | |
| 27 | | `transformImage` | Rotate, flip images | |
| 28 | | `adjustImage` | Brightness, saturation, blur, sharpen | |
| 29 | | `getImageMetadata` | Get image dimensions and format info | |
| 30 | |
| 31 | ## Workflow |
| 32 | |
| 33 | ### Step 1: Get Image Information (Recommended) |
| 34 | |
| 35 | Call `getImageMetadata` first to understand the base image dimensions for accurate positioning. |
| 36 | |
| 37 | ### Step 2: Perform Editing |
| 38 | |
| 39 | Use the appropriate tool based on the task. |
| 40 | |
| 41 | ### Step 3: Return Results |
| 42 | |
| 43 | Return the output image URL to the user. |
| 44 | |
| 45 | ## Common Use Cases |
| 46 | |
| 47 | ### Case 1: Add QR Code to Poster (Bottom-Right Corner) |
| 48 | |
| 49 | ```json |
| 50 | { |
| 51 | "base": "https://example.com/poster.jpg", |
| 52 | "layers": [{ |
| 53 | "input": "https://example.com/qrcode.png", |
| 54 | "resize": { "width": 150, "height": 150 }, |
| 55 | "gravity": "southeast" |
| 56 | }] |
| 57 | } |
| 58 | ``` |
| 59 | |
| 60 | ### Case 2: Add Logo Watermark (Absolute Position) |
| 61 | |
| 62 | ```json |
| 63 | { |
| 64 | "base": "https://example.com/photo.jpg", |
| 65 | "layers": [{ |
| 66 | "input": "https://example.com/logo.png", |
| 67 | "resize": { "scale": 0.5 }, |
| 68 | "top": 20, |
| 69 | "left": 20, |
| 70 | "opacity": 0.7 |
| 71 | }] |
| 72 | } |
| 73 | ``` |
| 74 | |
| 75 | ### Case 3: Resize for Social Media |
| 76 | |
| 77 | ```json |
| 78 | { |
| 79 | "input": "https://example.com/image.jpg", |
| 80 | "width": 1080, |
| 81 | "height": 1080, |
| 82 | "fit": "cover" |
| 83 | } |
| 84 | ``` |
| 85 | |
| 86 | ### Case 4: Create Thumbnail |
| 87 | |
| 88 | ```json |
| 89 | { |
| 90 | "input": "https://example.com/image.jpg", |
| 91 | "width": 200, |
| 92 | "height": 200, |
| 93 | "fit": "cover" |
| 94 | } |
| 95 | ``` |
| 96 | |
| 97 | ## Positioning Modes (Mutually Exclusive) |
| 98 | |
| 99 | **IMPORTANT:** `gravity` and `top/left` are mutually exclusive. Do NOT mix them. |
| 100 | |
| 101 | ### Mode A: Gravity Anchor Positioning |
| 102 | |
| 103 | Use `gravity` alone to place layer at predefined anchor points: |
| 104 | |
| 105 | ``` |
| 106 | northwest | north | northeast |
| 107 | ----------+----------+---------- |
| 108 | west | center | east |
| 109 | ----------+----------+---------- |
| 110 | southwest | south | southeast |
| 111 | ``` |
| 112 | |
| 113 | Example: `{ "gravity": "southeast" }` → bottom-right corner |
| 114 | |
| 115 | ### Mode B: Absolute Coordinates |
| 116 | |
| 117 | Use `top` + `left` together for precise pixel positioning: |
| 118 | |
| 119 | ``` |
| 120 | (0,0)────────────────────→ X (left) |
| 121 | │ |
| 122 | │ ┌─────────┐ |
| 123 | │ │ layer │ ← top=100, left=200 |
| 124 | │ └─────────┘ |
| 125 | ↓ |
| 126 | Y (top) |
| 127 | ``` |
| 128 | |
| 129 | Example: `{ "top": 100, "left": 200 }` → exact pixel position |
| 130 | |
| 131 | ### Layer Resize Options |
| 132 | |
| 133 | - `resize.width` / `resize.height`: Target dimensions in pixels |
| 134 | - `resize.scale`: Scale factor (e.g., 0.5 = half size, 2 = double size) |
| 135 | - `resize.fit`: Resize mode (contain, cover, fill, inside, outside) |
| 136 | |
| 137 | ## Fit Modes for Resize |
| 138 | |
| 139 | | Mode | Behavior | |
| 140 | | ------- | --------------------------------------- | |
| 141 | | cover | Crop to fill exact dimensions (default) | |
| 142 | | contain | Fit within bounds, may add padding | |
| 143 | | fill | Stretch to exact size (may distort) | |
| 144 | | inside | Fit within bounds, no upscaling | |
| 145 | | outside | Cover bounds, may exceed dimensions | |
| 146 | |
| 147 | ## Important Notes |
| 148 | |
| 149 | - All image inputs must be valid HTTP/HTTPS URLs |
| 150 | - Maximum image size: 50MB |
| 151 | - Output images are PNG format |
| 152 | - For compositing, process layers in order (first layer = bottom) |
| 153 | - Opacity only affects the overlay layer, not the base |
| 154 |