Widgets/Transformer

Resize Image Widget

Resize Image Widget

A "Transformer" type widget. Resize Image Widget allows you to change the dimensions of an input image. You can specify the target width and height either through input ports or using the widget settings.

 

Inputs

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

  • width (DataType: Number) The desired width in pixels for the output image. This port is only visible when input ports are enabled in settings.

  • height (DataType: Number) The desired height in pixels for the output image. This port is only visible when input ports are enabled in settings.


Outputs

  • image (DataType: ImageData) The resized image output. If no 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 (Width and Height) using the settings panel. This is useful when you want to:

  • Use fixed dimensions without external inputs
  • Dynamically control dimensions through input ports

Resize Configuration

When resizing images, you have two options:

  1. Fixed Dimensions: Set specific width and height values
  2. Dynamic Dimensions: Use input ports to control dimensions at runtime

Input Ports Toggle

 

📌 Important Notes

  • If no dimensions are specified, the original image is passed through unchanged

  • When only width is specified, the height is automatically calculated to maintain aspect ratio

  • When both dimensions are specified, the aspect ratio is not preserved and the image will be stretched or compressed to match the exact dimensions

  • 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

Fixed Size Resize

This example resizes an image to fixed dimensions of 400x300 pixels:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Drop Images service provides the input image and sends it through its image port
  2. The Resize Image widget receives the image and is configured with fixed values of 400 (width) and 300 (height)
  3. The Resize Image widget resizes the image using these fixed dimensions and transmits the result through its image port
  4. Finally, the Display widget shows the resized image with the new dimensions

 

Dynamic Size Resize

This example shows how to dynamically control the image dimensions using the width and height inputs:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Slider widget controls the dynamic value for the image height
  2. The Sequence widget receives the Slider value and performs two actions:
    • Through its port 1, it sends the Slider value to the height port of the Resize Image widget
    • Through its port 2, it triggers the Drop Images service
  3. The Drop Images service contains the loaded image and transmits it from its image port to the image input port of the Resize Image widget
  4. The Resize Image widget uses a fixed width of 145 pixels and the dynamic height from the Slider
  5. The Resize Image widget resizes the image using the fixed width and the dynamic height, then sends the result through its image output port
  6. Finally, the Display widget shows the resized image

 

Glossary

  • Aspect Ratio

    The proportional relationship between the width and height of an image, expressed as a ratio (e.g., 16:9, 4:3). Maintaining aspect ratio prevents image distortion when resizing.

  • 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 technology that provides methods for drawing graphics and manipulating images programmatically in web browsers.

  • Logic Mapper

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