BlocksMedia & Design
Manipulate Image
Process and transform images using operations like resizing, cropping, and format conversion.
The Manipulate Image block provides a powerful set of tools to programmatically edit images. Whether you need to create thumbnails, add a blur effect, or convert an image to a modern format like WebP, this block handles it all with high performance.
Core Concept
Think of this block as an automated darkroom. You provide a raw image "negative" (Base64 string), choose your tools (resize, rotate, filter), and the block instantly produces a new, processed image for you to use.
Configuration
| Field | Required | Description |
|---|---|---|
| Input Image (Base64) | ✅ | The raw Base64 string of the image you want to edit. Usually a variable from a previous block. |
| Operation | ✅ | The type of transformation to perform. Choosing an operation reveals specific settings for that tool. |
| Output Variable | ✅ | The name of the variable that will store the resulting processed Base64 string. |
Operation Settings
Resize / Scale
- Width (px): Target width. Leave empty to auto-scale based on height.
- Height (px): Target height. Leave empty to auto-scale based on width.
- Fit Strategy: How the image fills the dimensions (
Cover,Contain,Fill,Inside,Outside).
Convert / Compress
- Target Format: Choose between
WebP,JPEG,PNG,AVIF, orTIFF. - Quality (1-100): Compression level.
80is usually the "sweet spot" for web use.
Crop
- Left (x) / Top (y): The starting coordinates for the crop.
- Width / Height: The dimensions of the cropped area.
Blur
- Blur Intensity (Sigma): Higher values create a stronger Gaussian blur (range:
0.3to100).
Rotate
- Rotation Angle: Degrees to rotate clockwise (e.g.,
90,180,-45). - Fill Color: The color used to fill any empty space created by the rotation.
Flip / Mirror
- Flip Axis: Choose to mirror the image
Horizontally,Vertically, orBoth.
Grayscale
- Instantly converts the image to black and white.
Error Handling
INPUT_MISSING— Triggered when no input image data is provided.INVALID_INPUT— Triggered if the provided data is not a recognizable image format.OPERATION_FAILED— Triggered if the processing fails (e.g., trying to crop outside the image bounds).
Example
- Input Image:
{user_upload_base64} - Operation:
Resize / Scale - Width:
200 - Fit Strategy:
Cover(Perfect for profile thumbnails) - Output Variable:
thumbnail_img
Result: {thumbnail_img} will contain a 200px wide version of the original image, ready to be hosted or displayed.