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
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.
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.
The zoom options of the Image Editor are exactly what you would expect from a well-built editor:
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.
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.
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.