ASP.NET MVC Image Editor

Overview

The Telerik UI for ASP.NET MVC Image Editor component helps you modify images directly into your app, without having to install third-party software or switch 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.

See the ASP.NET MVC Image Editor in action
Resizing

When the Resize tool is selected, a panel is displayed on the right-hand side of the control with configuration options for adjusting the image width and height and locking the aspect ratio. As you change the size settings, you can easily see the before and after versions with the Undo & Redo buttons at the top of the control.
Cropping

Similar to resizing, selecting the Crop tool displays a panel that gives users several options—to tweak the image aspect ratio, orientation and width and height of the cropped version. Again, it is possible to switch back and forth between image versions with the Undo & Redo buttons to find the best result.
Zooming
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)
Custom Commands

In addition to the default Resize, Crop, Undo, Redo and Zoom commands., the Image Editor provides you with the opportunity to add custom commands. With the help of the ImageEditor namespace, you can easily extend the ImageEditorCommand class.

Example of adding a custom command that creates a thumbnail
Accessibility

Accessibility is an essential element to any application and an integral part of all Telerik UI components. The ASP.NET MVC ImageEditor component is compliant with Section 508 and WCAG 2.1 guidelines and accessible to all audiences.
Keyboard Navigation

The Image Editor comes with out-of-the box keyboard navigation support to enable all users to access and navigate it using just their keyboard.
Image Editor Theming

The Telerik ASP.NET MVC Image Editor has multiple built-in themes and swatches such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). 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 Progress SASS ThemeBuilder application.