Image Compose

Pastes a product image onto the largest white area of the BG, automatically resizing and aligning

Overview

This node composes a product image onto a background image by automatically detecting the largest white area in the background or filling the entire background. It resizes, aligns, and optionally rotates the product image to fit within the specified area, allowing for padding and alignment preferences. This is useful for creating composite images where a product needs to be placed on a clean background, such as in e-commerce or marketing visuals.

Use Case Examples

  1. Automatically placing a product photo onto a white background for a catalog image.
  2. Creating a composite image by fitting a product onto a background with specific padding and alignment.
  3. Rotating and resizing a product image to fit the largest white area in a background image.

Properties

Name Meaning
Base Image Property Name of the binary property containing the background image.
Product Image Property Name of the binary property containing the product image to overlay.
Output Property Name of the output binary property where the composed image will be stored.
Padding (px) Minimum internal margin in pixels between the product image and the useful area on the background.
Compose Mode Determines how the product image is fitted: either by detecting the largest white area or filling the entire background.
Horizontal Alignment Horizontal alignment of the product image within the detected or full background area.
Vertical Alignment (white area preference) Vertical alignment preference when detecting the largest white area: top, center, or bottom. If no white area is found, the largest global area is used.
Manual Rotation (°) Forces a specific rotation angle for the product image. Use 0 for automatic rotation, which is applied if the product is too vertical.

Output

JSON

  • json - Original input JSON data passed through.
    binary
    • data - Base64 encoded PNG data of the composed image.
    • mimeType - MIME type of the composed image, always 'image/png'.
    • fileName - Filename of the composed image, generated with a timestamp.

Dependencies

  • sharp image processing library

Troubleshooting

  • Error 'Insufficient white area for the product.' occurs if the detected white area is too small or padding is too large. Reduce padding or use 'Fill Entire Background' mode.
  • If the product image appears rotated incorrectly, adjust the 'Manual Rotation' property or set it to 0 for automatic rotation.
  • Ensure the input binary properties for background and product images are correctly named and contain valid image data in base64 format.

Discussion