Image Editor

Overview

Present your users with the Telerik UI for ASP.NET MVC Image Editor component to enable them to modify images directly in your app without installing third-party software or switching to an external application. The control is powered by the HTML5 Canvas element and comes with built-in options to load, crop, resize, zoom and download the resulting image.
Resizing

When the Resize tool is selected, a panel is displayed on the right-hand side of the control with UI to modify the width and/or height of the image and decide whether or not to lock the aspect ratio. As you change the size settings, you can easily see the before and after versions with the Undo & Redo buttons on the top of the control.
Cropping

Another panel is displayed when the Crop tool is selected, which again presents different options to the user – to tweak the aspect ratio, orientation, width and height of the cropped version. Again, it is possible to step back and forth with the Undo & Redo to find the best result.
Zoom Options
The zoom options of the Image Editor are exactly what you would expect from a well-built editor:
- Zoom-in button
- Zoom-out button
- Dropdown to choose between “Fit to Screen” (scale the entire image to fit in the display area of the control, usually by downscaling) and “Show Actual Size” (display the entire image in its full resolution with scrollbars if necessary)
Keyboard Navigation

Like most of the Telerik UI for ASP.NET MVC Components, the Image Editor comes with out-of-the box keyboard navigation support.
Image Editor Theming

The Telerik ASP.NET MVC Image Editor has 20+ built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.