ImageEditor Events
This article describes the available events in the Telerik ImageEditor for Blazor:
OnError
The ImageEditor OnError event fires when the component fails to load, edit, render, or export the image. The event handler receives an argument of type ImageEditorErrorEventArgs.
The component displays an error state when a file fails to load, so handling OnError is not required.
Also see the runnable example below.
Using the ImageEditor OnError event
<TelerikImageEditor OnError="@OnImageEditorError" />
@code {
private void OnImageEditorError(ImageEditorError args)
{
Console.WriteLine(args.Message);
}
}OnExecute
The ImageEditor OnExecute event fires after the component applies, undoes, or redoes an edit. The edit can come from a built-in tool or from the ExecuteAsync method. The event is not cancellable.
Zoom, pan, and live previews do not fire the event. For example, a slider that the user is still dragging does not fire OnExecute, and the component raises the event once when the drag completes.
The event handler receives an argument of type ImageEditorExecuteEventArgs that exposes the following properties:
Command(ImageEditorCommand)—the executed command.Reason(ImageEditorExecuteReason)—Execute,Undo, orRedo. On undo and redo, the event describes the edit that the component reverted or reapplied.Args(ImageEditorCommandArgs)—the command arguments. Cast them to the class that the command reference lists for the command. The value isnullfor commands without arguments.
Also see the runnable example below.
Using the ImageEditor OnExecute event
<TelerikImageEditor OnExecute="@OnImageEditorExecute" />
@code {
private void OnImageEditorExecute(ImageEditorExecuteEventArgs args)
{
if (args.Command == ImageEditorCommand.ApplyFilter && args.Args is ImageEditorFilterArgs filterArgs)
{
Console.WriteLine($"{args.Reason}: {filterArgs.Filter}");
}
}
}OnExport
The ImageEditor OnExport event fires before the edited image downloads. The event is cancellable and in this case the browser does not download the file.
The event handler receives an argument of type ImageEditorExportEventArgs that exposes the following properties:
FileName(string)—the name of the downloaded file. Set the property to rename the file.Format(string)—the MIME type of the export.IsCancelled(bool)—set the property totrueto prevent the download.
Also see the runnable example below.
Using the ImageEditor OnExport event
<TelerikImageEditor OnExport="@OnImageEditorExport" />
@code {
private void OnImageEditorExport(ImageEditorExportEventArgs args)
{
args.FileName = $"edited-{DateTime.Now:yyyy-MM-dd}";
//args.IsCancelled = true;
}
}OnOpen
The ImageEditor OnOpen event fires before the component opens an image from a selected file, from the Data parameter, or from the ImageUrl parameter. The event is cancellable and in this case the currently open image, if any, stays in the editor.
OnOpen always fires before any OnExecute event for the same image.
The event handler receives an argument of type ImageEditorOpenEventArgs that exposes the following properties:
FileName(string)—the name of the file, for example,"photo.png". The value is"image"when the image comes fromData, and the last segment of the URL when the image comes fromImageUrl.Extension(string)—the lowercase file extension, including the dot, for example,".png". The value isnullwhen the file name has no extension.FileSize(long?)—the file size in bytes. The value isnullwhen the image loads fromImageUrl.Width(int)—the width of the image in pixels.Height(int)—the height of the image in pixels.IsCancelled(bool)—set the property totrueto prevent the component from opening the image.
Also see the runnable example below.
Using the ImageEditor OnOpen event
<TelerikImageEditor OnOpen="@OnImageEditorOpen" />
@code {
private void OnImageEditorOpen(ImageEditorOpenEventArgs args)
{
if (args.Width > 8000 || args.Height > 8000)
{
args.IsCancelled = true;
}
}
}Example
The following example handles all ImageEditor events. Open an image from your device to see the event log.
Using the ImageEditor events