TUI Image Editor

Content Type: Widget
Categories: User Interface

Overview

Use TUI Editor, a Mendix widget available on the Mendix Marketplace, to edit images using HTML5 Canvas. 

Documentation

TUI-Image-Editor

Use TUI Editor, a Mendix widget available on the Mendix Marketplace, to edit images using HTML5 Canvas.

Features

Crop, Flip, Rotate, Draw, Shapes, Icon, Text, Filters, Undo/Redo

Dependencies

• Studio pro version 9.16.1

• Nanoflow Commons MxTechies

Description

• To enable users to select dynamic images, utilize a dynamic image viewer that allows for image selection.

• When working with images in Mendix, consider selecting a Base64 attribute to store your images as String.

• To enhance functionality, on the "Save" action button, utilize a JavaScript action with the "JS_ConvertBase64ToImage" functionality provided by the Nanoflow Commons MxTechies. This will allow you to convert Base64 images to regular images and improve the overall user experience. image image image image

Screenshots

image

Releases

Version: 1.0.0
Framework Version: 9.16.1
Release Notes: # TUI Image Editor ### Objective Use TUI Editor, a Mendix widget available on the Mendix Marketplace, to edit images using HTML5 Canvas. ### Features Crop, Flip, Rotate, Draw, Shapes, Icon, Text, Filters, Undo/Redo ### Dependencies • Studio pro version 9.16.1 • Nanoflow Commons MxTechies ### Description • To enable users to select dynamic images, utilize a dynamic image viewer that allows for image selection. • When working with images in Mendix, consider selecting a Base64 attribute to store your images as String. • To enhance functionality, on the "Save" action button, utilize a JavaScript action with the "JS_ConvertBase64ToImage" functionality provided by the Nanoflow Commons MxTechies. This will allow you to convert Base64 images to regular images and improve the overall user experience. ![image](https://user-images.githubusercontent.com/126104423/226813094-1211406d-7017-4093-98f7-cda9dab06b8c.png) ![image](https://user-images.githubusercontent.com/126104423/226813105-13e11ddb-ca6a-4da4-ba8d-59b6d43b6fb2.png) ![image](https://user-images.githubusercontent.com/126104423/226813113-9f88a00a-d30c-4133-8e60-5e16987f9e87.png) ![image](https://user-images.githubusercontent.com/126104423/226813133-0e3b6f14-4f0f-4116-8e15-8f5b4ba211cc.png) ### Screenshots ![image](https://user-images.githubusercontent.com/126104423/226813073-cd00a05f-2e66-41b8-8bbf-33ea89b4f7c9.png)