Save the edit in server.

7 posts, 0 answers
  1. Lovella Bacaud
    Lovella Bacaud avatar
    20 posts
    Member since:
    Apr 2013

    Posted 04 Nov 2013 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 04 Nov 2013 Link to this post

    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
    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 the blog feed now.
  5. Arikkan
    Arikkan avatar
    2 posts
    Member since:
    Sep 2014

    Posted 08 Apr Link to this post

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

    }

     

  6. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 12 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Arikkan
    Arikkan avatar
    2 posts
    Member since:
    Sep 2014

    Posted 13 Apr in reply to Vessy Link to this post

    Thanks. This worked.

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

     

     

  8. Vessy
    Admin
    Vessy avatar
    1383 posts

    Posted 14 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017