Telerik blogs

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

Default View

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):

  • Print: Dialogue to print the image
  • Save: Prompts the user to either download locally or save the image to the server
  • Undo: Undo your last step (can go back all the way to original state)
  • Redo: Redo last undone step (can go forward until all the way until last step taken)
  • Reset: Resets the image to the initial loaded state
  • Crop: Dialogue to deal with cropping the image
  • Resize: Change the size of the image
  • Zoom: Spawns a dialogue to adjust the zoom level
  • Zoom In: Zooms in by one unit
  • Zoom out: Zooms out by one unit
  • Opacity: Change the transparency level of the image
  • Rotate: Spawns a dialogue to work with rotations
  • Rotate Right – 90 degrees: Rotates image 90 degrees to the right
  • Rotate Left – 90 degrees: Rotates image 90 degrees to the left
  • Flip: Spawns a dialogue to work with flipping the image
  • Flip Vertically: Flip the image over a vertical line
  • Flip Horizontally: Flip the image over a horizontal line
  • Add Text: A dialogue to add text anywhere on the image

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
About the Author

Carl Bergenhem

Carl Bergenhem was the Product Manager for Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.