New to Kendo UI for jQuery? Download free 30-day trial

Getting Started with the ImageEditor

This guide demonstrates how to get up and running with the Kendo UI for jQuery ImageEditor.

After the completion of this guide, you will achieve the following end result:

    <div id="imageEditor"></div>
    <script>
    $("#imageEditor").kendoImageEditor({
        imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/images/photos/2.jpg",
        width: 500,
        height: 400
    });
    </script> 

1. Create a Div Element

First, create a <div> element on the page that will be used to initialize the component.

<div id="imageEditor"></div>

2. Initialize the ImageEditor

In this step, you will initialize the ImageEditor from the <div> element.

<div id="imageEditor"></div>

<script>
    // Target the input element by using jQuery and then call the kendoImageEditor() method.
    $("#imageEditor").kendoImageEditor({
        // Add some basic configurations such as width and height.
        width: 500,
        height: 400
    });
</script>

3. Configure the Image's URL

The ImageEditor enables you to set the URL (or base64 string) of the image that will be opened by using the imageUrl property.

<div id="imageEditor"></div>

<script>
    <div id="imageEditor"></div>
    <script>
    $("#imageEditor").kendoImageEditor({
        imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/images/photos/2.jpg", //specify the url or base64 string
        width: 500,
        height: 400
    });
</script> 

Next Steps

See Also

In this article