Progress Telerik UI for ASP.NET Core

Image Editor

  • Use the ASP.NET Core ImageEditor component to modify image files directly in the browser with no need of external software. Features built-in commands for cropping, resizing, loading, zooming and more.
  • This control is part of the Telerik UI for ASP.NET Core suite along with 100+ fully-featured UI components designed to speed up delivery & improve every aspect of your workflow.
  • Manage each project and plan dev time accordingly using the public product roadmap, regular releases, extensive learning resources and outstanding technical support team.

Telerik UI for ASP.NET Core Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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.

    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 they can easily revert or reapply the change to the image before deciding on what 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 again 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
  • Zoom Options

    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)
  • 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.

    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) 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.

    Image-Editor-Theming
Get Started Waves

Next Steps

Launch demos

See Telerik UI for ASP.NET Core in action and check out how much it can do out-of-the-box.

Compare pricing

Check out the offers. Purchase an individual suite, or treat yourself to one of our bundles.

Download Free Trial

Try Telerik UI for ASP.NET Core with dedicated technical support.