Save the edit in server.

[Lovella Bacaud]

hello

I am loading an image in a radimage editor. I am resizing the image and I found that these operations are not reflected in the server side. Why it is like this? I want every change to be available on the server side. Suppose I load the image and rotate and resize it, I want these to be available on the server. Is this possible?

thanks
lovella

[Shinu]

Hi Lovella,

RadImageEditor by default collects all operations applied to the image before execute them, and then after saving is triggered all the operations are applied on the server following the order of the stack collected on the client. This is approach is used to be able to provide Undo / Redo functionality and to reduce the number of executed callbacks. Flip, Rotate and Resize are initially visually applied on the client and when the image is saved all client-side operations are applied on the server.

You can force image saving to apply client-side modifications using the applyChangesOnServer() client-side method of RadImageEditor as shown in the following sample code.

ASPX:

<telerik:RadImageEditorID="RadImageEditor1"runat="server"ImageUrl="~/ROOT/Sunset.jpg">
</telerik:RadImageEditor>
<asp:Button ID="Button1" runat="server" Text="Save" OnClientClick="applyModifications();return false;"/>

JavaScript:

<script type="text/javascript">
    function applyModifications() {
        $find("<%=RadImageEditor1.ClientID %>").applyChangesOnServer();
    }
</script>

Thanks,
Shinu.

[Vessy]

Hello Lovella,

The default editing mode of the ImageEditor is CanvasMode and, as explained by Shinu, all the changes in it are made Client-side. If you want to edit the image entirely on the Server, you can disable the CanvasMode, using the following property:

<telerik:RadImageEditor ID="RadimageEditor1" runat="server" ImageUrl="image.png" CanvasMode="No">
</telerik:RadImageEditor>

Note, though, that the non canvas mode does not support image filters and drawing.

Regards,
Veselina Raykova
Telerik

[Arikkan]

I am trying to save the Image from Client side (Modified by Client), using a External Button "Continue".

It is not working. The server side code saves the image and it is exactly the same Image as source image without any changes: 

------------------------------------------------------------------------------------------------------------------------
 <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="/Images/Banner.png" 

                                                        Width="1000px" Height="430px" EnableViewState="true"> 
                                    <Tools>
                                        <telerik:ImageEditorToolGroup>                                           
                                            <telerik:ImageEditorTool CommandName="Pencil"></telerik:ImageEditorTool>
                                        </telerik:ImageEditorToolGroup>
                                    </Tools>
                                </telerik:RadImageEditor>        

 

 <telerik:RadButton ID="btnClearClient" runat="server" Text="Clear Signature" AutoPostBack="false" OnClientClicked="btnClearClient_OnClientClicked" Width="150px" Height="40px" />

&nbsp;

<telerik:RadButton ID="btnSaveClient" runat="server" Text="Save on Server" AutoPostBack="false" Width="150px" Height="40px" OnClientClicked="btnSaveClient_OnClientClicked" />
&nbsp;
<telerik:RadButton ID="btnSaveServer" runat="server" Text="Save on Disk" AutoPostBack="true" SingleClick="true" SingleClickText="Saving.... " Width="150px" Height="40px" OnClick="btnSaveServer_Click" />

 

 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">

------------------------------------------------------------------------------------------------------------------------
   function btnClearClient_OnClientClicked(sender, args) {
                var _imgId = $find("<%= RadImageEditor1.ClientID %>");
                _imgId.resetChanges();
            }

            function btnSaveClient_OnClientClicked(sender, args) {
                debugger;
                var _imgId = $find("<%=RadImageEditor1.ClientID %>");
                _imgId.saveClientState();
                //_imgId.saveImageOnServer("", true);
                _imgId._applyChangesOnServer();
                _imgId.applyChangesOnServer();
                //_imgId.saveOnClient("c:\test.png");
                //_imgId._applyChangesOnServer_Img();
                //_imgId._applyChangesOnServer_Canvas();
            }

        </script>

------------------------------------------------------------------------------------------------------------------------

protected void btnSaveServer_Click(object sender, EventArgs e)
{

   Telerik.Web.UI.ImageEditor.EditableImage thumbImage = RadImageEditor1.GetEditableImage().Clone();

    thumbImage.ConvertTo(Telerik.Web.UI.ImageEditor.EditableFormat.Bmp);

    var ms = new MemoryStream();

    thumbImage.Image.Save(ms, thumbImage.RawFormat);

    String pathToThumbs = "~/";

    File.WriteAllBytes(String.Format("{0}{1}.{2}", MapPath(pathToThumbs), ImageName, thumbImage.Format), (byte[])ms.ToArray());

}

 

[Vessy]

Hi Arikkan,

When the ImageEditor is used in CanvasMode (enabled by default) all applied changes are kept on the client. The only way to pass the changed image to the server and save it is to use the ImageEditor's client-side saveImageOnServer() method and move the server side logic of your saving button to the ImageEditor's ImageSaving event handler.

You can examine a live implementation of a similar approach in the following ImageEditor's demo:
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx

Regards,
Vessy
Telerik

[Arikkan]

Thanks. This worked.

Is there any way to make this control responsive or include it in another frame that is responsive.

 

 

[Vessy]

Hi Arikkan,

The ImageEditor provides only Limited responsive capabilities which means that you can configure only its Width in percentages, but not its height (unless the control is wrapped in a fixed size parent).
​

<telerik:RadImageEditor ID="ImageEditor1" runat="server" ImageUrl="~/Images/PERIC.jpg" Width="100%">
</telerik:RadImageEditor>

Regards,
Vessy
Telerik