Save button outside of RadImageEditor

[Leo]

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

[Vessy]

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

[Fendhika]

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

[Vessy]

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