ASP.NET MVC Image Editor

  • Modify image files directly in the browser without having to use external software with the ASP.NET MVC ImageEditor component. Supporting built-in commands for cropping, resizing, loading, zooming and more.
  • Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
  • Includes support, documentation, demos, virtual classrooms and more!
Telerik UI for ASP.NET MVC Suite
  • 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

    Telerik UI for ASP.NET Core Image Editor Overview
  • 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. 

    Telerik UI for ASP.NET MVC Image Editor Dialog Resize
  • 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.  

    Telerik UI for ASP.NET MVC Image Editor Crop
  • 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. 

  • 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. 
    Telerik UI for ASP.NET MVC Accessibility
  • 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. 

    Telerik UI for ASP.NET Core Keyboard navigation
  • 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.

    Telerik UI for ASP.NET MVC Image-Editor-Theming

All ASP.NET MVC Components

Next Steps