Save button outside of RadImageEditor

4 posts, 0 answers
  1. Leo
    Leo avatar
    6 posts
    Member since:
    Jun 2013

    Posted 25 Jul 2013 Link to this post

    Hi there,

    I'm considering adding a Save RadButton outside of the ImageEditor box which perform the same functionality as the Save tool in ImageEditor. Here's my code:

    Public Sub SaveRB_Click(ByVal sender As Object, ByVal args As EventArgs) Handles SaveRB.Click
      
        Dim RadImageEditor1 As RadImageEditor = DirectCast(MiscUtils.FindControlRecursively(Me.Page, "RadImageEditor1"), RadImageEditor)
        RadImageEditor1.SaveImageOnServer("", true)
      
    End

    However, it seemed that the property "CanvasMode" was blocking this functionality. When I set CanvasMode="False", it worked; otherwise it didn't. Is there any workaround so that I can have both the Save RadButton and CanvasMode's tools? Thank you!

    Best,

    Long
  2. Vessy
    Admin
    Vessy avatar
    1491 posts

    Posted 30 Jul 2013 Link to this post

    Hello Long,

    The reason for the experienced behavior is that when the ImageEditor is used in CanvasMode, all changes made to the edited image are kept on the Client. That is to say if you want to save the image on the server, you have to go through the Client-side saveImageOnServer() method (in this mode the equivalent server method do not do anything).

    More information on the subject and a live implementation of the described approach is available in this online demo: Save Image to a Custom Location

    I hope this helps.

    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.
  3. Fendhika
    Fendhika avatar
    1 posts
    Member since:
    Feb 2017

    Posted 01 Mar Link to this post

    Hi there,

    I have same condition about save button outside of RadImageEditor, save button successfully save image on custom location but image saved not newest edited image. 

    Here's my code :

    on aspx.vb

     Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As Telerik.Web.UI.ImageEditorSavingEventArgs)
            'Save the image to a custom location
            Dim namafile As String = Session("FRAME")
            Dim formatfile As String = Trim(namafile) & "-{0}.jpg"
            Dim fullPath As String = Server.MapPath("~/Image_appr/")
            Dim fileName As String = String.Format(formatfile, DateTime.Now.ToString("yyyyMMdd-hhmmss"))
            fullPath = Path.Combine(fullPath, fileName)

            Dim img As Telerik.Web.UI.ImageEditor.EditableImage = args.Image
            img.Image.Save(fullPath)
           

            args.Cancel = True
        End Sub

     

    Protected Sub Button_save_Click(sender As Object, e As EventArgs) Handles Button_save.Click

            Dim img As Telerik.Web.UI.ImageEditor.EditableImage = RadImageEditor1.GetEditableImage()

            Dim namafile As String = Session("FRAME")
            Dim formatfile As String = Trim(namafile) & "-{0}.jpg"
            Dim fullPath As String = Server.MapPath("~/Image_appr/")
            'Dim fileName As String = String.Format("test-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss"))
            Dim fileName As String = String.Format(formatfile, DateTime.Now.ToString("yyyyMMdd-hhmmss"))
            fullPath = Path.Combine(fullPath, fileName)
            RadImageEditor1.SaveEditableImage(fullPath, True)

        End Sub

    on aspx

    <script>
            (function (global, undefined) {
                function OnClientCommandExecuting(imEditor, eventArgs) {
                    if (eventArgs.get_commandName() == 'Save') {
                        imEditor.saveImageOnServer('', true);

                        //Prevent the buil-in Save dialog to pop up
                        imEditor.setToggleState('Save', false);
                        imEditor.saveImageOnServer('', true);
                        eventArgs.set_cancel(true);
                       
                    }
                }

                function OnClientSaved(imgEditor, args) {
                    //alert(args.get_argument());
                    $get("messageLbl").innerHTML = args.get_argument();
                    //$get("messageLbl").innerHTML = "File Saved";
                }            

                global.OnClientSaved = OnClientSaved;
                global.OnClientCommandExecuting = OnClientCommandExecuting;
              
            })(window);
        </script>

     

    <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" 
                OnImageSaving="RadImageEditor1_ImageSaving" OnClientCommandExecuting="OnClientCommandExecuting" OnClientDialogLoaded="OnClientDialogLoaded" Width="650px" style="top: 0px; left: 0px; height: 466px"  EnableResize="false">
                <Tools>
                    <telerik:ImageEditorToolGroup>
                       <%-- <telerik:ImageEditorTool CommandName="Print"></telerik:ImageEditorTool>--%>
                        <telerik:ImageEditorTool CommandName="Save"></telerik:ImageEditorTool>
                        <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                        <telerik:ImageEditorToolStrip CommandName="Undo">
                        </telerik:ImageEditorToolStrip>
                        <telerik:ImageEditorToolStrip CommandName="Redo">
                        </telerik:ImageEditorToolStrip>
                        <%--<telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>--%>
                        <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                        <telerik:ImageEditorTool CommandName="Pencil"></telerik:ImageEditorTool>
                        <telerik:ImageEditorTool CommandName="ZoomIn"></telerik:ImageEditorTool>
                        <telerik:ImageEditorTool CommandName="ZoomOut"></telerik:ImageEditorTool>
                    </telerik:ImageEditorToolGroup>
                </Tools>
            </telerik:RadImageEditor>

    <asp:Button ID="Button_save" runat="server" Text="Save" CssClass="mybutton" Width="80px" />

     

    I try with ImageEditorTool  Save on RadImageEditor the result ok, but with outside button cannot save image that newest edited.

    Please help.Thank

    Regards,

    Dhika

  4. Vessy
    Admin
    Vessy avatar
    1491 posts

    Posted 02 Mar Link to this post

    Hi Fendhika,

    The solution for your scenario is the same - you will need to disable the AutoPostBack of the Button_save button and call the ImageEditor's saveImageOnServer() method in the client-side click handler of the button. You can move the logic from the Button_save_Click handler to the ImageSaving one (without calling the RadImageEditor1.SaveEditableImage() method as it saves only the original image).

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top