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
  • Rotate Clockwise/Anticlockwise
  • Crop
  • Download

Documentation

https://youtu.be/ybIKL9-hNhU

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
  • Rotate Clockwise/AntiClockwise
  • Crop/Save
  • Download


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 as a list
  2. Image URL
  • Format Ex : http://localhost/file?target=window&guid=XXX&changeDate=XXX&name=XXX

Releases

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