Jimp - Image Processing icon

Jimp - Image Processing

Process images with Jimp - resize, crop, and transform

Overlay Images

AI-generated

Summary

Overlay a foreground image onto a background image with configurable horizontal and vertical alignment, margins (insets), opacity, and resizing algorithm, producing a composited image as output.

Inputs

  • Background Property (required) — Name of the binary property containing the background image.
  • Foreground Property (required) — Name of the binary property containing the foreground image to overlay.
  • Output Property Name (required) — Name of the binary property to store the composited (overlayed) image.
  • Horizontal Alignment (required) — Horizontal placement of the foreground image on the background (Left, Center, Right).
  • Vertical Alignment (required) — Vertical placement of the foreground image on the background (Top, Middle, Bottom).
  • Inset (Margins) — Margins in pixels between the edges of the background and the foreground image (top, bottom, left, right).
  • Overlay Options — Options for resizing and opacity of the foreground image including Resize Algorithm (Bilinear, Bicubic, Nearest Neighbor) and Opacity (0-1).

Output shape

a single record with JSON metadata and updated binary data

Returns one item per input. The composited image is stored in the specified output binary property. The JSON contains details about positioning, dimensions, margins, file size, and MIME type of the resulting image. Throws an error if the insets are too large to allow placing the foreground image.

Examples

Example 1: Overlay a logo (foreground image) onto a photo (background image), centering the logo with 10 pixels margin on all sides, using bicubic resizing and 80% opacity.

Set 'Background Property' to the binary key containing the photo (e.g., 'data'), 'Foreground Property' to the key with logo (e.g., 'foreground'), 'Output Property Name' to 'data'. Choose 'Horizontal Alignment' and 'Vertical Alignment' both as 'Center'. Set each inset margin to 10. Under 'Overlay Options', set 'Resize Algorithm' to 'Bicubic' and 'Opacity' to 0.8.

Discussion