ASP.NET Core ImageEditor Overview
The Image Editor is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ImageEditor TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ImageEditor widget.
The ImageEditor utilizes a canvas element and enables image editing. It allows you to open, edit and save edited .png
, .jpg
, or .jpeg
images.
Initializing the ImageEditor
The following example demonstrates how to define the ImageEditor.
@(Html.Kendo().ImageEditor()
.Name("imageEditor")
.Width(500)
.Height(500)
.SaveAs(saveas => saveas.FileName("image.png"))
)
<kendo-imageeditor name="imageEditor" width="500" height="500">
<save-as file-name="image.png" />
</kendo-imageeditor>
Functionality and Features
Events
The following example demonstrates how to handle ImageEditor events on the client-side. For a complete example on basic ImageEditor events, refer to the demo on using the events of the ImageEditor.
@(Html.Kendo().ImageEditor()
.Name("imageEditor")
.Events(e => e
.ImageLoaded("onImageLoaded")
)
)
<script>
function onImageLoaded(e) {
console.log("Image loaded");
}
</script>
<kendo-imageeditor name="imageEditor"
width="500"
height="500"
on-image-loaded="onImageLoaded">
</kendo-imageeditor>
<script>
function onImageLoaded(e) {
console.log("Image loaded");
}
</script>