Refreshing ImageEditor after custom server-side operation

3 posts, 0 answers
  1. Kelsey
    Kelsey avatar
    7 posts
    Member since:
    Jan 2007

    Posted 15 Mar 2012 Link to this post

    We've implemented a custom server-side function which combines cropping and applying text to an image. Ultimately, our server side method saves a new version of the cropped image to the file system. We are attempting to re-render the saved, cropped image back into the ImageEditor. However, when the ImageEditor is updated after the server-side operation, the cropped image is skewed and seems to be stretched to the width and height of the original image.

    I've observed that setting args.cancel = true in our server-side method causes the same behavior I've described above to occur.

    What is the appropriate way to refresh/repaint the RadImageEditor after a server-side operation?

    <asp:UpdatePanel ID="updtImagepanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div style="height: 600px" id="designDiv" runat="server">
                <table>
                    <tr>
                        <td>
                            <div style="height: 600px; width: 400px;">
                                <telerik:RadImageEditor ID="RadImageEditor" runat="server" StatusBarMode="Hidden"
                                    Width="400px" Height="600px" OnImageEditing="Image1_ImageEditing" EnableResize="true">
                                    <Tools>
                                        <telerik:ImageEditorToolGroup>
                                        </telerik:ImageEditorToolGroup>
                                    </Tools>
                                </telerik:RadImageEditor>
                            </div>
                        </td>
        </ContentTemplate>
    </asp:UpdatePanel>

    Server-Side Code:

    protected void Image1_ImageEditing(object sender, ImageEditorEditingEventArgs args){
                args.Cancel = true;
                string fileFolder = ConfigurationManager.AppSettings["Telerik_FileUpload"];
                string fileName = string.Empty;
     
                var commandArguments =
                    (Dictionary<string, object>)args.ClientObjectsDictionary["commandArgument"];
     
                if (args.CommandName == "SaveImage")
                {
                    EditableImage editableImage = args.Image;
                    // Cropping Of an Image
                    Rectangle cropRectangle = new Rectangle(
                        Convert.ToInt16(commandArguments["viewportX"]) - Convert.ToInt16(commandArguments["topX"]),
                        Convert.ToInt16(commandArguments["viewportY"]) - Convert.ToInt16(commandArguments["topY"]),
                        400,
                        600);
                         
                    editableImage.Crop(cropRectangle);
     
                    // Applying Title, Subtitle on Image
                    //
                    //Code to set variables for ApplyText method omitted for brevity
                    //
                    //Custom function to apply text to the cropped image
                    Image newImage = ApplyText(titlePosition, subTitlePosition, authorNamePosition, title, subtitle, authorName, editableImage);
     
                    newImage.Save(Path.Combine(fileFolder, fileName), ImageFormat.Jpeg);
     
                    RadImageEditor.ImageUrl = //path to my image
     
                    updtImagepanel.Update();
                }
            }

  2. Tony
    Tony avatar
    12 posts
    Member since:
    Jan 2008

    Posted 19 Mar 2012 Link to this post

    Has there been any response to this? I am also interested in refreshing the image editor after server-side event.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 20 Mar 2012 Link to this post

    Hello,

    This is expected behavior of RadImageEditor. Current implementation of the custom server command preserves the original size of the edited image. We do plan to extend this functionality to provide more flexibility for one of the upcoming releases.

    For the time being, you can use the _finishReset() private client-side method inside the callback function of the editableImage to reset the size of the displayed image, e.g.:
    Telerik.Web.UI.ImageEditor.CommandList.CustomCrop = function (imageEditor, commandName, args)
    {
        var commandText = "CustomCrop";
        var commandArgument = "CustomCrop";
        imageEditor.editImageOnServer(commandName, commandText, commandArgument, callbackFunction)
    }
     
    function callbackFunction(clientData, serverData)
    {
        var imgEditor = $find("<%=RadImageEditor1.ClientID %>");
        imgEditor.getEditableImage()._finishReset();
    }


    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top