Refreshing ImageEditor after custom server-side operation

[Kelsey]

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();

            }

        }



[Tony]

Has there been any response to this? I am also interested in refreshing the image editor after server-side event.

[Dobromir]

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