Easy Image

Content Type: Widget
Categories: Utility

Overview

This widget can be used to upload an image file (PNG, JPEG, JPG or BMP) and modify the image in the following ways:

  • Zoom In/Out
  • Pan
  • Rotate Clockwise/Counterclockwise
  • Crop/Save
  • Download

Documentation

https://youtu.be/ybIKL9-hNhU

Image Manipulation Zoom In/Out, Pan, Rotate Clockwise/Counterclockwise, Crop, Download

Description

This widget can be used to upload an image file (PNG, JPEG, JPG or BMP) and modify the image in the following ways:

  • Zoom In/Out
  • Pan
  • Rotate Clockwise/Counterclockwise
  • Crop/Save
  • Upload
  • Download

Additional features include

  • Translations for button labels
  • Rendering buttons using only icons to save space
  • Glyphicon icon customization

This project was bootstrapped with Create React App.

Project Information

This application was created using the following versions:

  • Node v18.3.0
  • NPM v8.15.0

Required Packages

To set up the project, install the following packages:

npm i react-image-crop
npm i react-easy-crop
npm i @material-ui/core

Getting Started

To start the application, run the following command: npm start

Widget Integration

The widget can be found in the following location: ../dist/1.0.0/io.entidad.widget.EasyImage.mpk Copy the widget and paste it inside the "widgets" folder in your application. After synchronizing the application, locate the widget with the name "io.entidad.widget.EasyImage.mpk" under the tools. You can then drag and drop it into a container

Widget Parameters

The widget requires the following parameters to be passed:

  1. Image entity type
  2. Image GUID or Image URL Image URL takes priority over GUID
  3. Optional On Save Microflow or Nanoflow

Releases

Version: 1.0.11
Framework Version: 9.24.11
Release Notes: * Renamed mpk to match Mendix naming convention
Version: 1.0.9
Framework Version: 9.24.11
Release Notes: - Support for icons with tooltips or text labels for buttons if space on the screen is a concern - Support for icon customization - Added optional Image URL attribute - Fixed refresh issues; styling improvements - Added support for image cropping - Crop feature validations and improvements - Outer component overflow fixes - Image stabilization fixes **Full Changelog**: https://github.com/Entidad/react-easy-image/compare/1.0.0...1.0.9
Version: 1.0.0
Framework Version: 9.24.11
Release Notes: Image Manipulation Zoom In/Out, Rotate Clockwise/Anticlockwise, Cropping, Download **Full Changelog**: https://github.com/Entidad/react-easy-image/commits/1.0.0