Skip to Content (Press Enter)
Community › Forge › Assets list › Image Editor (Toast UI)
image-editor-toast-ui
Reactive icon

Image Editor (Toast UI)

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 15 Sep (16 hours ago)
 by 
0.0
 (0 ratings)
image-editor-toast-ui

Image Editor (Toast UI)

Documentation
1.0.0

Image Editor (Toast UI) brings a powerful and customizable image editing experience to your OutSystems applications.
It is powered by the Toast UI Image Editor, an open-source library that works seamlessly on both Web and Mobile.

This component allows users to load, edit, and save images with features like cropping, rotating, flipping, drawing, adding text/shapes/icons, and applying filters. It also supports Base64 images and binary data, making it easy to integrate with OutSystems entities.

Features


  • Crop, rotate, and flip images.

  • Draw freehand or with shapes.

  • Add text with customizable fonts and colors.

  • Insert icons and stickers.

  • Apply filters for visual effects.

  • Load images from URL, Base64, or Binary data.

  • Save the edited image as Base64 or Binary to reuse in your application.

  • Customizable UI: button labels, default tool, menu bar position, and editor dimensions.

  • Responsive for both Web and Mobile apps.

Input Parameters


ParameterTypeDescription
IsShowToastUILogoBooleanControls whether the Toast UI logo is displayed inside the editor.
HeightText / Integer        Defines the vertical size of the image editor.
WidthText / IntegerDefines the horizontal size of the image editor.
LoadImageButtonNameTextSets the display text of the button used for loading an image.
DownloadImageButtonName     TextSets the display text of the button used for downloading the edited image.
SelectedImageBinaryBinary DataLoads an image into the editor from binary data (e.g., stored in an entity).
SelectedImageURLTextLoads an image into the editor from a URL.
DefaultSelectedMenuTextDefines which editing tool (e.g., crop, draw, text, filter) is selected by default when the editor opens.
menuBarPositionTextDetermines where the editor’s menu bar is positioned (top, bottom, left, right).







How to Use

  1. Install the Component

    • Add Image Editor (Toast UI) Block to your application from OutSystems Forge.

  2. Add the Web Block

    • Drag and drop the ImageEditor_ToastUI block into your screen.

  3. Configure Inputs

    • Set either SelectedImageURL or SelectedImageBinary to load the initial image.

    • Adjust Height, Width, menuBarPosition, and button labels as needed.

  4. Capture Edited Image

    • Use the event from the block to get the final image.

    • You can save it to the database, display it in another widget, or upload.