Widgets/Transformer

Extract Image Widget

Extract Image Widget

A "Transformer" type widget. Extract Image Widget provides functionality to extract a specific rectangular region from an input image. It allows you to define the area to extract using a rectangle specification, with optional offset adjustments.

 

Inputs

  • image (DataType: ImageData) The input image from which a region will be extracted.

  • rect (DataType: Rect | JsonObj) Defines the rectangular area to extract from the input image. The rectangle should specify:

    • left: The x-coordinate of the top-left corner
    • top: The y-coordinate of the top-left corner
    • width: The width of the area to extract
    • height: The height of the area to extract

Outputs

  • image (DataType: ImageData) The extracted portion of the image as a new ImageData object.

Custom Settings

  • Offset: The settings define the offset from the specified rectangle. (essentially functioning as padding). You can use decimal values in the offset to specify relative percentages (e.g., width: 0.5 means 50% of the image width)
    • left position (x-coordinate)
    • top position (y-coordinate)
    • width
    • height

Resize Configuration

 

📌 Important Note

The video demonstrations use the Image Drop Service to load images dynamically. If you want to replicate the example exactly as shown in the video, you’ll need to install and use this service.

For the draggable examples in LogicMapper, Base64 image data is used so you can try them out immediately.

 

Examples

Basic Image Extraction

This example demonstrates how to extract a region from an image:


Drag the example onto the workspace to explore and experiment!


In this example:

  1. The Drop Images Widget loads an image and transmits it through the image port
  2. The Sequence Widget receives the image and coordinates the data flow:
    • Transmits the image to the image port of the Extract Image Widget
    • Triggers the Text Widget that contains the rectangular extraction area as a JSON string: {"left": 60, "top": 20, "width": 150, "height": 120}
  3. The Text to Object Widget converts the JSON string to an object and transmits it to the rect port of the Extract Image Widget
  4. The Extract Image Widget receives both the image and the rectangle coordinates, then extracts the specified rectangular region with a 50% width offset (width: 0.5)
  5. The Display Widget receives the extracted image through the in port and shows the result

 

Dynamic Region Extraction

This example shows how to dynamically define the extraction region:


Drag the example onto the workspace to explore and experiment!


In this example:

  1. The Custom Rect Widget allows you to dynamically define the rectangular area for extraction using sliders for top, left, width, and height
  2. The Sequence Widget receives the rectangle values from the Rect Widget and performs two actions:
    • Connects to the rect input port of the Extract Image Widget
    • Connects to the current port of the Drop Images Widget
  3. The Drop Images Widget loads an image and transmits it through its image output port to the image input port of the Extract Image Widget
  4. The Extract Image Widget receives the image data and the rectangle coordinates, then extracts the specified rectangular region with a 50% width offset (width: 0.5)
  5. The Display Widget receives the extracted image through its in port and shows the result

Note: The Rect Widget used in this example is a Custom Widget that can be created using the "Create Custom Widget" option. For the draggable example, Slider Widgets are used for the same purpose, allowing you to interact with the example immediately.

 

📌 Additional Notes

  • The widget preserves the original image data outside the extraction area
  • You can use decimal values in the offset to specify relative percentages (e.g., width: 0.5 means 50% of the image width)
  • The widget automatically handles boundary cases when the extraction area extends beyond the image dimensions
  • The extracted region maintains the same resolution and quality as the source image
  • The widget state and extraction parameters are preserved when the recipe is saved

 

Glossary

  • Rect

    A rectangular area specification containing left, top, width, and height properties to define a region within an image.

  • Custom Widget (Widget Group)

    A powerful tool that allows users to create custom widgets by grouping other widgets together. Custom widgets can be created by right-clicking on the workspace and selecting "Create custom widget" from the context menu. They enable users to encapsulate complex workflows into reusable components with custom input ports, output ports, and settings. Once created, custom widgets appear in the "Custom Widgets" → "My Widgets" drawer and can be reused in any workspace.

  • Drop Images Service

    A Hub Service that allows you to store multiple images and use them as data for other widgets. It supports drag-and-drop functionality for adding images and provides controls for navigating through the stored images. It outputs the currently selected image data as ImageData to be used in other parts of your recipe.