WorqHat
Utility

Image Overlay

Category
Utility
Node Type
Media Processing

Overview

The Image Overlay node places an overlay image on top of a base image with configurable size and position. Use it for watermarks, stickers, and branded visuals.

Description

Add watermarks or stickers.

Provide a base inputImage and parameters for the overlay: type, size, and position.

Watermarking

Add logos or copyright text to protect images.

Branding

Apply stickers or badges to marketing assets.

Dimensions can be pixels or percentages; positions can be presets (e.g., top-left) or coordinates.

Input Parameters

Configure the overlay settings.

inputImagestringRequired
Base image URL or File ID.
Example
"https://example.com/base.jpg"
overlayImagestringRequired
Overlay image URL or File ID.
Example
"https://example.com/logo.png"
overlayTypestringOptional
Type of overlay (e.g., 'watermark').
Example
"watermark"
overlayPositionstringOptional
Position: 'top-left', 'center', 'bottom-right', or 'x,y'.
Example
"bottom-right"
overlayWidthstringOptional
Width in pixels or %.
Example
"25%"
overlayHeightstringOptional
Height in pixels or % (or 'auto').
Example
"auto"

Output Parameters

The node returns the processed image.

imagestringOptional
URL of the resulting image.
Example
"https://example.com/output.jpg"
processingTimestringOptional
Time taken to process.

Output Type

Output Type: Image

The output is an image file reference or URL.

Example Usage

Example 1: Add Logo Watermark

Place a logo in the bottom-right corner.

{  "inputImage": "https://example.com/photo.jpg",  "overlayImage": "https://example.com/logo.png",  "overlayPosition": "bottom-right",  "overlayWidth": "20%"}
{  "image": "https://processed-images.com/123.jpg"}

How to Use in a No-Code Workflow

1

Add the Node

Place the Image Overlay node after an image source.

2

Configure Images

Map the Input Image and Overlay Image URLs.

3

Set Position

Choose a position (e.g., bottom-right) and size.

4

Use Output

Pass {{imageOverlay.output.image}} to downstream nodes.

Best Practices

  • Use transparent PNGs for overlays.
  • Use percentage widths for responsiveness.

Do / Don’t

Do
  • ✔️ Maintain brand-safe padding from edges.
  • ✔️ Test with different base image sizes.
Don’t
  • ❌ Don’t use low-resolution overlay images.
  • ❌ Don’t cover essential parts of the base image.

Common Errors

Missing overlayImageErrorOptional
An overlay image is required.
Invalid positionErrorOptional
Use a supported preset or valid coordinates.

Example Workflow Integration

Use Case: Watermark User Uploads

Automatically brand user-uploaded photos.

  1. File Upload: User uploads a photo.
  2. Image Overlay: Apply company logo to bottom-right.
  3. Save to Storage: Store the branded image.

Workflow Data Flow:

{{upload.fileUrl}} → {{imageOverlay.inputImage}}
{{imageOverlay.image}} → {{storage.fileUrl}}