We often get requests for new controls and features for our products here at Telerik, and the RadControls for ASP.NET AJAX are definitely no exception. One of the most popular requests has always been for the ability to edit images online. Enter the RadImageEditor. This new control, introduced with the Q2 2011 release, allows for end users to take images, edit them in various ways, and then either save them to the server or to their local machine. In this blog post I’ll introduce this new control to you, taking a quick look at how to set it up (it’s very easy, I promise!), highlight what editing capabilities are available, as well as go over some of the client-side aspects of the control.
Setup
To use the full list of tools that you see available on this online demo on an image you really only need to take two steps to start with the RadImageEditor. Step one is to drag the control out to the page and step two is define the ImageURL property to point to a valid image. That’s all! If you’re doing it manually you of course have to define the ID and runat properties (standard for all ASP.NET AJAX controls) but aside from that you really only need to pay attention to the ImageURL property. This property does need to be set to a valid image in order for the control to function, so this means that the image has to reside of the server. Luckily we have already solved that issue for you with the RadUpload and RadAsyncUpload controls!
You could of course limit the tools that are available to the user, or define your own groups and change the order around if you’d like to. There are two different ways of approaching this. One is either to define them within the declaration of the control itself:
<
telerik:RadImageEditor
ID
=
"RadImageEditor1"
runat
=
"server"
ImageUrl
=
"~/Images/hay.jpg"
>
<
Tools
>
<
telerik:ImageEditorToolGroup
>
<
telerik:ImageEditorTool
CommandName
=
"RotateLeft"
/>
</
telerik:ImageEditorToolGroup
>
</
Tools
>
</
telerik:RadImageEditor
>
And the other is to define an XML file like this:
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
root
>
<
tools
name
=
"MainToolbar"
>
<
tool
name
=
"RotateLeft"
/>
</
tools
>
</
root
>
Followed by just setting the ToolsFile property of the control:
<
telerik:RadImageEditor
ID
=
"RadImageEditor1"
runat
=
"server"
ImageUrl
=
"~/Images/hay.jpg"
ToolsFile
=
"~/sampletools.xml"
>
</
telerik:RadImageEditor
>
Features
Let’s take a look at all of the features available. While most of them end up being pretty obvious in terms of functionality, for the sake of making this easy for everyone I’ll go through the tools left-to-right according to the image above (taken from our First Look demo):
This is currently the full list of image editing functions found within the RadImageEditor. While some of the buttons instantly change the picture (zoom in, zoom out, rotate left and right for example) there are dialogues that have sliders and other forms of setters to have a more customized approach to editing your image. If any regret over a change to an image appears you can very easily take use of the undo and redo buttons, as well as resetting the entire image back to the way it was when initially loaded.
Client-side Programming
As with all of our controls you have the ability to work with the RadimageEditor on the client-side using JavaScript. Out-of-the-box you already have access to JavaScript functions that correspond to all of the tools that I listed above. So if you want to create your own interface for dealing with these commands just leave the tools list blank, add your own UI, and then tie your interface to these commands and you’re good to go. Here I have a small example in which an external button rotates the image 90 degrees to the left upon every click of a button:
<
script
type
=
"text/javascript"
>
function resize() {
var imageEditor = $find("<%=RadImageEditor1.ClientID %>");
imageEditor.rotateLeft90();
}
</
script
>
<
asp:Button
ID
=
"ClientButton"
runat
=
"server"
Text
=
"Rotate"
OnClientClick
=
"resize()"
/>
<
br
/>
<
telerik:RadImageEditor
ID
=
"RadImageEditor1"
runat
=
"server"
ImageUrl
=
"~/Images/hay.jpg"
>
</
telerik:RadImageEditor
>
For a better look at what you can accomplish client-side I recommend reading over our online documentation, specifically the client-side section.
Conclusion
So that gives you a look into what the RadImageEditor is and how to actually start working with it. Out-of-the-box most of the hard stuff is taken care of already; all of the tools described above are all included when you do not specify the tool list yourself. Keep in mind that all of these controls can also be executed via JavaScript, so if you want to define your own UI around the control you can very easily do so.
Carl Bergenhem was the Product Manager for Kendo UI.