background

UI for ASP.NET Core

ASP.NET Core Image Editor

  • Use the ASP.NET Core Image Editor to modify image files directly in the browser with no need of external software.
  • Part of the Telerik UI for ASP.NET Core library along with 110+ professionally designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for WinForms Ninja
  • Overview

    With the Telerik UI for ASP.NET Core Image Editor component your users gain the ability to modify image files in the browser without installing third-party software or opening an external application. The control is driven by the HTML5 Canvas element. It provides several built-in commands for loading, cropping, resizing, zooming and downloading the edited image. 

    See the ASP.NET Core Image Editor in action

    Telerik UI for ASP.NET Core Image Editor Overview
  • Resizing

    To make matters simple, some of the Image Editor’s instruments like the Resize tool use a dedicated panel on the right-hand side of the control. This panel displays UI to edit both dimensions of the image and a checkbox to lock the aspect ratio.  While the user is experimenting with the correct sizes, a preview will be shown. Through the Undo and Redo buttons, users can easily revert or reapply the change to the image before deciding on what best works for them. 

    Telerik UI for ASP.NET Core Image Editor Dialog Resize
  • Cropping

    Similarly to the Resize command, cropping also uses a dedicated panel. The panel contains options to tweak the aspect ratio, orientation, width and height of the cropped version. Users can preview the results and use the Undo and Redo buttons to revert/reapply the change if needed. 

    Telerik UI for ASP.NET Core Image Editor Dialog Crop
  • Zooming

    To zoom in or out on an image, users can use the zoom controls on the top of the editor: 

    • Zoom-in button
    • Zoom-out button
    • Dropdown to choose between “Fit to Screen” (to 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

    If the default tools, such as Open, Save, Resize, Crop, Undo, Redo, etc., are not enough for your project’s needs, you can always add custom commands by extending the ImageEditorCommand class and implementing a custom ImageEditor command. To see an example of how to create a custom command that creates a thumbnail from the loaded image, visit our ImageEditor documentation page
  • Upload and Download

    You can upload the picture you want to edit and download the edited one with a simple click of a button, which will then either show you a window to choose which picture you want to edit (“Open Image”) or will download the picture you already perfected using the component (“Save Image”).  
  • Image Editor in a Razor Page

    You can easily configure the Telerik UI for ASP.NET Core Image Editor component in a Razor Page scenario by making the ImageEditor forward the content to a proxy URL, even if the browser supports local saving of files.  

    See how to implement the Image Editor in a Razor Page 

  • HTML and Tag Helpers

    Telerik UI for ASP.NET Core offers two options for declaring UI components—through HTML or Tag helpers. You can choose which approach to use for the Image Editor component based on the developer preference, technology background or team development practice. Both HTML and Tag helpers allow you to lay out the components and their configuration with a simple and easy-to-read HTML-like syntax.  
    Telerik ASP.NET Core ComboBox HTML and Tag Helpers
  • Accessibility

    The Image Editor component follows the WAI-ARIA Authoring Practices for implementation of keyboard navigation and is Section 508 and WCAG 2.1 guidelines compliant, thus you can rest assured that when adding it to your application, it will fit the needs of all users. 
    Telerik UI for ASP.NET Core Accessibility
  • Keyboard Navigation

    The Image Editor is one of the many components in the Telerik UI for ASP.NET Core suite with out-of-the-box support for keyboard navigation. Users can use Ctrl + Z for Undo and Ctrl + Y for the Redo command, Tab to choose which button to focus and Enter or Space to press the focused button. 

    Telerik UI for ASP.NET Core Keyboard navigation
  • Image Editor Theming

    The Telerik ASP.NET Core Image Editor has 20+ built-in themes 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 Telerik SASS ThemeBuilder application.

    Image-Editor-Theming

All ASP.NET Core Components

Next Steps