ImageEditorPro

Advanced image editing: collage, text overlay, watermark
Join our community

Overview

This node, named ImageEditorPro, provides advanced image editing capabilities within n8n workflows. It supports three main modes of operation:

  • Collage: Combines multiple images into a grid layout with configurable rows, columns, spacing, and background color.
  • Add Text: Overlays customizable text on an image, including font size, color, opacity, position, and optional background shapes (circle, rectangle) with padding and border colors.
  • Add Watermark: Adds a watermark text overlay to an image with adjustable position and opacity.

This node is useful for automating image processing tasks such as creating photo collages, branding images with text or watermarks, or preparing images for social media or marketing materials.

Practical Examples

  • Automatically generate a collage from URLs of product images for an e-commerce site.
  • Add promotional text overlays to images before posting on social media.
  • Apply a copyright watermark to images uploaded by users to protect intellectual property.

Properties

Name Meaning
Mode Operation mode: Collage, Add Text, or Add Watermark.
Image URLs Comma-separated list of image URLs to process.
Rows Number of rows in the collage grid (only for Collage mode).
Columns Number of columns in the collage grid (only for Collage mode).
Spacing Spacing in pixels between images in the collage (only for Collage mode).
Background Color Background color of the collage canvas (only for Collage mode).
Text Text string to overlay on the image (only for Add Text mode).
Font Size Font size of the overlay text (only for Add Text mode).
Text Color Color of the overlay text (only for Add Text mode).
Text Background Shape Background shape behind the text: None, Circle, or Rectangle (only for Add Text mode).
Text Background Color Color of the text background shape (only for Add Text mode when a shape other than None is selected).
Text Border Color Border color of the text background shape (only for Add Text mode when a shape other than None is selected).
Shape Width Width of the background shape behind the text (only for Add Text mode with a shape).
Shape Padding Padding in pixels between the shape border and the text inside it (only for Add Text mode with a shape).
Shape Height Height of the background shape (only for Add Text mode with Rectangle or Square shapes).
Text Alignment in Shape Position of the text inside the background shape: Top, Center, Bottom, or Custom (only for Add Text mode with a shape).
Text X Offset (inside shape) Horizontal offset of the text inside the background shape when alignment is Custom (only for Add Text mode with a shape).
Text Y Offset (inside shape) Vertical offset of the text inside the background shape when alignment is Custom (only for Add Text mode with a shape).
Position Position of the text or watermark on the image: Top Left, Center, Bottom Right, or Custom (for Add Text and Add Watermark modes).
Custom X Custom horizontal coordinate for text or watermark position (only if Position is Custom).
Custom Y Custom vertical coordinate for text or watermark position (only if Position is Custom).
Opacity Opacity level of the text or watermark overlay, from 0 (transparent) to 1 (opaque) (for Add Text and Add Watermark modes).
Watermark Text Text content of the watermark (only for Add Watermark mode).

Output

The node outputs a single binary file containing the resulting edited image in PNG format (image/png). The output data is accessible in the binary.data field of the output item.

  • The json part of the output item is empty ({}).
  • The binary data represents the final image after applying the selected editing operation (collage, text overlay, or watermark).

Dependencies

  • This node requires no external API keys or credentials.
  • It depends on an internal utility function (imageEditor) imported from a bundled helper module to perform image processing.
  • Input images can be provided either as URLs or as binary data from previous nodes.
  • No special environment variables or n8n configurations are needed beyond standard workflow setup.

Troubleshooting

  • Error: "Must provide either image URLs or binary image input."
    This error occurs if neither image URLs nor binary image data is supplied. Ensure you provide at least one source of images, either via the "Image URLs" property or by connecting a node that outputs binary image data.

  • Invalid Image URLs
    If URLs do not start with http:// or https://, they will be ignored. Verify that all URLs are valid and accessible.

  • Binary Data Issues
    When providing binary image data, ensure the input node outputs valid binary data under the expected property name.

  • Unsupported Modes or Missing Parameters
    Make sure to select a supported mode and fill in all required parameters for that mode. For example, "Rows" and "Columns" are required for the collage mode.

Links and References

Discussion