The Image Cropper component enables users to resize and crop images visually within OutSystems Reactive and Mobile applications. Users can select the exact area they want to keep using a draggable and resizable crop box.

A real-time preview displays the final output before saving, ensuring accuracy and reducing re-uploads.

All image manipulation happens client-side using HTML5 Canvas, which provides fast performance and avoids unnecessary server calls.

Key Features

??? Interactive Crop Selection

Users can drag and resize the crop box to select the required portion of the image.

Common uses:

• Profile picture selection

• Document alignment

• ID card capture

• Product image adjustment

??? Live Preview

Shows a real-time preview of the cropped output so users know exactly what will be saved.

?? Export as Base64

The cropped image can be returned as a Base64 string.

Useful for:

• Saving into BinaryData attributes

• Sending to REST APIs

• Upload workflows

• Temporary storage before submit

?? Download Cropped Image

Users can download the cropped image instantly as a PNG/JPG file.