Preview and Apply predefined Effects to an Image with RadWindow and custom Image Processing Library

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 20 Aug 2014 Link to this post


    Requirements

    Telerik Product and Version

    Supported Browsers and Platforms

    		 All browsers supported by UI for ASP.NET AJAX 

    Components/Widgets used (JS frameworks, etc.)

    PROJECT DESCRIPTION

    The idea behind this code library is to demonstrate a possible implementation for integrating custom, predefined effects in RadImageEditor, with a preview of each effect in a RadWindow, allowing the user to easily decide which effect to apply.

    Image1

    In the attached project, a simple Image Processing Library (BinaryImageLibrary) is used, where 8 predefined effects are available.

    Image1


    Image1


    Implementation 

    For this setup we are going to use RadImageEditor and RadWindow (where the effect previews will be rendered):
    <telerik:RadWindow runat="server" ID="RadWindow1" ...>
        <ContentTemplate>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                <asp:Panel runat="server" ID="Panel1" CssClass="imageWrapper"></asp:Panel>
            </telerik:RadAjaxPanel>
        </ContentTemplate>
    </telerik:RadWindow>
     
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ...>
    </telerik:RadImageEditor>



    First, we are going to include an item in the RadImageEditor tools, so we can open manually the RadWindow:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            Telerik.Web.UI.ImageEditor.CommandList.CustomEffects = function (imageEditor, commandName, args) {
                $find("<%=RadWindow1.ClientID%>").show();
                $find("<%=RadWindow1.ClientID%>").set_modal(true);
            }
            ....
        </script>
    </telerik:RadCodeBlock>
     
    ...
     
    <telerik:RadImageEditor ....>
        <Tools>
            <telerik:ImageEditorToolGroup>
                ....
                <telerik:ImageEditorTool CommandName="CustomEffects" ToolTip="Effects" ImageUrl="Icons/customEffects.png"></telerik:ImageEditorTool>
            </telerik:ImageEditorToolGroup>
        </Tools>
    </telerik:RadImageEditor>


    The next step is to create RadBinaryImage controls in Panel control placed in the RadWindow. This is done automatically by the AddBinaryImageControls(System.Drawing.Image) method, which is called within the RadImageEditor's OnPreRender event with the current image in the editor as an argument:
    protected void RadImageEditor1_PreRender(object sender, EventArgs e)
    {
        AddBinaryImageControls(RadImageEditor1.GetEditableImage().Image);
    }


    When the RadBinaryImage controls are generated, an event handler for the client-side click event is attached with effect's name as an argument for the fireCommand() function, which fires custom command through the client-side API of the RadImageEditor:
    function fireCommand(commandName) {
        var imageEditor = $find("<%=RadImageEditor1.ClientID%>");
        imageEditor.editImageOnServer("Effects", "", commandName, callbackFunction);
    }


    Finally, within the server-side OnImageEditing event of the editor, the effect name is retrieved from the arguments and is used for applying the effect from the Image Processing Library's predefined effects:
    protected void RadImageEditor1_ImageEditing(object sender, ImageEditorEditingEventArgs e)
    {      
        e.Cancel = true;
        System.Drawing.Image originalImage = e.Image.Image;
        if (e.CommandName == "Effects")
        {
            BinaryEditableImage binaryImage = new BinaryEditableImage(originalImage);
            binaryImage.Effects.ApplyEffectByName(binaryImage, e.Argument);
            e.Image.ReplaceImage(binaryImage.GetImage());
        }
    }


    BinaryImageLibrary

    The attached library exposes simple functionality for editing binary images, System.Drawing.Color objects and methods for converting between different image data formats. 

    The source code of the library is included in the attached solution, where help document is also available in the BinaryImageLibrary folder (documentation.chm).


    Final Notes

    In order to run the attached solution you will have to add Telerik.Web.UI and Telerik.Web.Skins DLLs in the Bin folder of the project.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.