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?
Server-Side Code:
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();
}
}