Widgets/Transformer

Warp Image Widget

Warp Image Widget

A "Transformer" type widget. Warp Image Widget is a browser-only widget that allows you to transform an image by moving four anchor points to define a new perspective. This is useful for correcting perspective distortions (e.g., making a photographed document appear flat) or for creative warping effects.

 

Inputs

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

Outputs

  • Image (DataType: ImageData) The warped image output. If no anchors are set, the original image will be passed through unchanged.

Custom Settings

Anchor Point Manipulation

You can interactively move four anchor points over the image to define the source and destination quadrilaterals for the perspective transformation. The widget UI provides handles for each anchor point.

  • Drag each anchor to the desired position on the image.
  • The transformation is applied in real time as you move the anchors.

Anchor Point UI

 

Examples

Perspective Correction

This example shows how to use the widget to correct the perspective of a skewed image:


Drag the example onto the workspace to explore and experiment!



In this example

  1. Click on the Drop Images service to send the skewed image through the Warp Image widget.
  2. The skewed image is received through the image input port.
  3. Click on the Warp Image widget to bring up the image for manipulation.
  4. Create four anchor points on the skewed image.
  5. Move the four anchor points to the corners of the canvas to straighten the image and click on "done".
  6. Trigger the Drop Images service to apply the perspective correction.
  7. The corrected image is displayed on the Display widget.

 

📌 Additional Notes

  • This widget is only compatible with browser environments. Running a recipe that uses it in Kemu Edge will result in errors.
  • The widget requires all four anchor points to be set for the transformation to take effect
  • If fewer than four anchors are set, the original image is passed through unchanged
  • The transformation uses a perspective matrix for accurate warping
  • The widget leverages the Speedy Vision library for high-performance image processing.

 

Glossary

  • Canvas API

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

  • Perspective Matrix

    A mathematical transformation matrix used to apply perspective transformations to images, allowing for accurate warping and distortion correction.

  • Perspective

    A geometric transformation that changes the perspective of an image by mapping points from one plane to another, commonly used to correct skewed or distorted images.

  • Speedy Vision Library

    An external JavaScript library optimized for high-performance image processing operations, providing efficient algorithms for various computer vision tasks.