This is a migrated thread and some comments may be shown as answers.

Refreshing ImageEditor after custom server-side operation

2 Answers 200 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Kelsey
Top achievements
Rank 1
Kelsey asked on 15 Mar 2012, 10:10 PM
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 Answers, 1 is accepted

Sort by
0
Tony
Top achievements
Rank 2
answered on 20 Mar 2012, 12:36 AM
Has there been any response to this? I am also interested in refreshing the image editor after server-side event.
0
Dobromir
Telerik team
answered on 20 Mar 2012, 01:47 PM
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.
Tags
ImageEditor
Asked by
Kelsey
Top achievements
Rank 1
Answers by
Tony
Top achievements
Rank 2
Dobromir
Telerik team
Share this question
or