Widgets/Transformer

Crop Image Widget

Crop Image Widget

A "Transformer" type widget. Crop Image Widget allows you to extract a specific rectangular region from an input image in two ways:

  1. Using the Interactive Crop Tool to visually select the region directly in the widget UI
  2. By specifying the x and y coordinates along with the width and height of the desired area through input ports

This flexibility makes it particularly useful when you need to focus on a specific part of an image or remove unwanted areas, whether through visual selection or precise numerical control.

 

Inputs

  • image (DataType: ImageData) The input image to be cropped. This port accepts image data in any format supported by the Canvas API.

  • x (DataType: Number) The X coordinate (in pixels) of the top-left corner of the crop area. This value determines where the cropping will begin horizontally.

  • y (DataType: Number) The Y coordinate (in pixels) of the top-left corner of the crop area. This value determines where the cropping will begin vertically.

  • width (DataType: Number) The width (in pixels) of the area to crop. This value determines how wide the resulting cropped image will be.

  • height (DataType: Number) The height (in pixels) of the area to crop. This value determines how tall the resulting cropped image will be.


Outputs

  • image (DataType: ImageData) The cropped image output. If no crop dimensions are specified, the original image will be passed through unchanged.

Custom Settings

Input Ports Visibility

You can toggle the visibility of the numeric input ports (x, y, width, height) using the settings panel. This is useful when you want to:

  • Use only the visual crop tool without external inputs
  • Hardcode the crop dimensions instead of receiving them dynamically through ports

Interactive Crop Tool

The Crop Image widget provides an intuitive crop tool interface that allows you to:

  • Click and drag to select the crop region
  • Resize the selection using corner and edge handles
  • Move the selection by dragging from within the selected area

Crop Tool Interface

 

📌 Important Notes

  1. The visual crop tool and port inputs cannot be used together
  2. If the crop area extends beyond the image boundaries, the widget will automatically adjust the dimensions to fit within the image
  3. For best results, ensure that the crop dimensions (width and height) are positive numbers and that the x and y coordinates are within the bounds of the input image
  4. If no crop dimensions are specified or if they are all set to 0 or undefined, the widget will pass through the original image unchanged
  • 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 Logic Mapper, Base64 image data is used so you can try them out immediately.

 

Examples

Visual Crop Selection

This example shows how to use the visual crop tool to select and extract a region from an image:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. A Drop Images service provides the input image
  2. The Crop Image widget displays the full image with the visual crop tool interface enabled
  3. The crop tool interaction involves:
    • Positioning the cursor over the image
    • Clicking and dragging to create a dashed white rectangular selection box
    • Using the corner and edge handles to resize the selection area
    • Moving the entire selection by dragging from within the selected area
  4. Clicking on the Drop Images service triggers the crop application using the selected region coordinates
  5. The Crop Image widget processes the selected region and transmits the cropped result through the image port
  6. The Display widget receives and shows the cropped result containing only the selected area

 

Basic Image Cropping

This example demonstrates how to crop a 200x200 pixel square from the center of an image using port inputs:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. A Drop Images service provides the input image
  2. The Drop Images service connects to a Sequence widget that orchestrates the workflow
  3. The Sequence widget coordinates the crop operation:
    • Triggers three Value widgets that define the crop area:
      • Value (150) sets the x-coordinate (horizontal position)
      • Value (90) sets the y-coordinate (vertical position)
      • Value (200) sets both width and height (creating a 200x200 square)
    • Sends the original image to the Crop Image widget
  4. The Crop Image widget receives the image and applies the crop using the specified coordinates
  5. The Display widget shows the final cropped result
  6. Click on the Sequence widget to run the workflow and see the cropped image appear in the Display widget.

 

📌 Additional Notes

  1. The Crop Image widget maintains the original image's pixel data and does not perform any scaling or interpolation

 

Glossary

  • Base64

    A way to convert binary data (like images) into text format using only letters, numbers, and a few symbols. This allows binary data to be stored or transmitted as text, making it easier to embed images directly in code or examples.

    Base64 To Image Widget: Converts Base64 encoded image strings into ImageData format that can be processed by other image widgets in Kemu.

  • Canvas API

    A web API that provides methods for drawing graphics and manipulating images on HTML canvas elements.

  • ImageData

    A JavaScript object that represents pixel data for an image, containing width, height, and pixel color information in a format compatible with the HTML5 Canvas API.

  • Interactive Crop Tool

    A visual interface within the widget that allows users to select and adjust crop regions by clicking, dragging, and using handles to resize the selection area.

  • Logic Mapper

    Kemu's visual programming interface where users can drag and drop widgets to create workflows and connect them together to process data.