The Image Annotation Tool enables end users to visually mark, highlight, and edit images inside an OutSystems Reactive / Mobile application without requiring external libraries or server processing.

The component receives an image via BinaryData input parameter and renders it inside an HTML5 Canvas where users can annotate interactively.

All operations happen client-side — meaning:

• Faster performance

• No temporary files stored on server

• Reduced server load

• Works offline in mobile apps

Key Features

?? Drawing / Annotation

Users can draw free-hand annotations over the image using mouse or touch input.

Use cases:

• Highlight damaged product areas

• Mark fields in documents

• Sign / initial on image

• Draw arrows, circles, notes

?? Undo

Reverts the last drawing action without clearing entire canvas.

Helps users correct mistakes while annotating.

?? Clear Canvas

Removes all annotations and resets image to original state.

?? Save as Base64

Exports the annotated image as Base64 string.

Perfect for:

• Storing in database (BinaryData)

• Sending via REST API

• Attaching in forms

• Uploading to external storage

?? Download Image

Allows users to download the final annotated image as a PNG file directly from browser.