Blazor ImageEditor Commands

Updated on Nov 9, 2026

The ImageEditor exposes an ExecuteAsync method that applies an edit from the application code. The method runs the same commands that the built-in tools run, and adds the result to the undo history.

Use ExecuteAsync to:

• Apply presets.
• Build a custom toolbar outside the component.
• Repeat an edit across several images.

Execute a Command

The ExecuteAsync method has two overloads:

Method	Description
ExecuteAsync(ImageEditorCommand command, ImageEditorCommandArgs args)	Runs a command that requires arguments. The method throws an ArgumentException when the arguments class does not match the command.
ExecuteAsync(ImageEditorCommand command)	Runs a command that does not require arguments, for example, ResetCrop.

To call the method, obtain a reference to the component instance with the @ref directive attribute.

Apply a filter programmatically

RAZOR

<TelerikButton OnClick="@OnSepiaButtonClick">Apply Sepia</TelerikButton>

<TelerikImageEditor @ref="@ImageEditorRef" ImageUrl="images/sample-photo.jpg" />

@code {
    private TelerikImageEditor ImageEditorRef { get; set; }

    private async Task OnSepiaButtonClick()
    {
        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.ApplyFilter,
            new ImageEditorFilterArgs() { Filter = ImageEditorFilter.Sepia });
    }
}

Command Reference

All commands are members of the ImageEditorCommand enum. Each command uses one arguments class that inherits the abstract ImageEditorCommandArgs class. The OnExecute event reports the same commands and arguments when the user edits the image through the UI.

The X, Y, Width, and Height values in ImageEditorRect and the X and Y values in ImageEditorPoint are relative to the image and range from 0 to 1.

To use absolute pixel coordinates in a command, divide them by the image dimensions.

Use pixel coordinates in ImageEditor commands

RAZOR

@code {
    private const double ImageWidth = 1920;
    private const double ImageHeight = 1080;
    private TelerikImageEditor ImageEditorRef { get; set; }

    private static ImageEditorRect Rect(double x, double y, double width, double height)
    {
        return new ImageEditorRect()
        {
            X = x / ImageWidth,
            Y = y / ImageHeight,
            Width = width / ImageWidth,
            Height = height / ImageHeight
        };
    }

    private static ImageEditorPoint Point(double x, double y)
    {
        return new ImageEditorPoint()
        {
            X = x / ImageWidth,
            Y = y / ImageHeight
        };
    }

    private async Task AddAnnotations()
    {
        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.AddText,
            new ImageEditorTextArgs()
            {
                Text = "Damage Claim",
                Area = Rect(1560, 60, 360, 50),
                Rotation = 30
            });

        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.AddShape,
            new ImageEditorShapeArgs()
            {
                Shape = ImageEditorShapeType.Line,
                From = Point(480, 250),
                To = Point(320, 150)
            });
    }
}

Crop and Resize Commands

Command	Arguments Class	Arguments Properties
Crop	ImageEditorCropArgs	Area
CropToAspectRatio	ImageEditorCropToAspectRatioArgs	AspectRatio (null for the original ratio), Orientation, Area
SetCropSize	ImageEditorSizeArgs	Width, Height, LockAspectRatio
Resize	ImageEditorSizeArgs	Width, Height, Unit, LockAspectRatio
ResetCrop	None	Not applicable
ResetSize	None	Not applicable

Transform Commands

Command	Arguments Class	Arguments Properties
Rotate	ImageEditorAngleArgs	Angle
SetRotation	ImageEditorAngleArgs	Angle
Straighten	ImageEditorAngleArgs	Angle
SetTransform	ImageEditorTransformArgs	Rotation, Straighten, FlipHorizontal, FlipVertical
Flip	ImageEditorFlipArgs	Direction
Scale	ImageEditorScaleArgs	Factor
ResetTransform	None	Not applicable

Color Commands

Command	Arguments Class	Arguments Properties
ApplyFilter	ImageEditorFilterArgs	Filter
Adjust	ImageEditorAdjustArgs	Adjustment, Value
AdjustMany	ImageEditorAdjustmentsArgs	Brightness, Exposure, Contrast, Saturation, Hue, Blur, Opacity
ResetAdjustments	None	Not applicable
ResetColor	None	Not applicable

Blur Commands

Command	Arguments Class	Arguments Properties
AddBlur	ImageEditorBlurArgs	Id, Area, Mode, Shape, Intensity
AddBlurs	ImageEditorBlursArgs	Blurs
UpdateBlur	ImageEditorBlurArgs	Id, Area, Mode, Shape, Intensity
DeleteBlur	ImageEditorObjectArgs	Id
ClearBlurs	None	Not applicable

Object Commands

The following commands manage the text boxes and shapes on the canvas. See also Objects.

Command	Arguments Class	Arguments Properties
AddShape	ImageEditorShapeArgs	Id, Shape, Area, From, To, Stroke, Fill, LineStart, LineEnd, Rotation
AddText	ImageEditorTextArgs	Id, Text, Area, Style, Rotation
UpdateObject	ImageEditorUpdateObjectArgs	Id, plus any property to change
AlignObject	ImageEditorAlignObjectArgs	Id, Horizontal, Vertical, Target
MoveObject	ImageEditorMoveObjectArgs	Id, DeltaX, DeltaY
ReorderObject	ImageEditorReorderObjectArgs	Id, Index
DuplicateObject	ImageEditorObjectArgs	Id
FlipObject	ImageEditorObjectArgs	Id
DeleteObject	ImageEditorObjectArgs	Id
ClearObjects	None	Not applicable

Frame and Shadow Commands

Command	Arguments Class	Arguments Properties
SetFrame	ImageEditorFrameArgs	Type, Count, Thickness, Roundness, Offset, Position, StrokeType, Color, ImageCornerRadius
SetFrameSide	ImageEditorFrameArgs	Type, Count, Thickness, Roundness, Offset, Position, StrokeType, Color, ImageCornerRadius
SetCornerRadius	ImageEditorCornerRadiusArgs	Radius
SetShadow	ImageEditorShadowArgs	Enabled, OffsetX, OffsetY, Blur, Spread, Color, Opacity
RemoveFrame	None	Not applicable
RemoveShadow	None	Not applicable

Export Commands

The following commands configure the export settings.

Command	Arguments Class	Arguments Properties
SetExportFormat	ImageEditorExportSettingsArgs	Format
SetExportQuality	ImageEditorExportSettingsArgs	Quality
SetFileName	ImageEditorExportSettingsArgs	FileName
SetExportSettings	ImageEditorExportSettingsArgs	Format, Quality, FileName

Shared Types

The command arguments classes use the following types:

Type	Properties
ImageEditorRect	X, Y, Width, Height
ImageEditorPoint	X, Y
ImageEditorStroke	Color, Width, Opacity, StrokeType
ImageEditorFill	Color, Opacity
ImageEditorTextStyle	FontFamily, FontSize, Bold, Italic, Underline, Strikethrough, AllCaps, Align, Color, Opacity

Example

The following example applies a watermark preset with a single button. It crops the image to a 16:9 ratio, adds a text object in the bottom right corner, and warms up the colors.

Run several ImageEditor commands from code

RAZOR

<TelerikButton OnClick="@OnPresetButtonClick" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
    Apply Preset
</TelerikButton>

<TelerikImageEditor @ref="@ImageEditorRef"
                    ImageUrl="images/sample-photo.jpg"
                    Width="100%"
                    Height="600px" />

@code {
    private TelerikImageEditor ImageEditorRef { get; set; }

    private async Task OnPresetButtonClick()
    {
        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.CropToAspectRatio,
            new ImageEditorCropToAspectRatioArgs()
            {
                AspectRatio = 16d / 9d,
                Orientation = ImageEditorCropOrientation.Landscape
            });

        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.ApplyFilter,
            new ImageEditorFilterArgs() { Filter = ImageEditorFilter.Warm });

        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.AddText,
            new ImageEditorTextArgs()
            {
                Id = "watermark",
                Text = "Telerik UI for Blazor",
                Area = new ImageEditorRect() { X = 0.6, Y = 0.85, Width = 0.35, Height = 0.1 },
                Style = new ImageEditorTextStyle()
                {
                    FontFamily = "Arial",
                    FontSize = 24,
                    Bold = true,
                    Align = ImageEditorTextAlign.Right,
                    Color = "#ffffff",
                    Opacity = 0.8
                }
            });
    }
}

Next Steps

• Export the edited image
• Handle the ImageEditor events

See Also

• Live Demo: ImageEditor
• ImageEditor API Reference