This is a migrated thread and some comments may be shown as answers.

Save button outside of RadImageEditor

3 Answers 283 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Leo
Top achievements
Rank 2
Leo asked on 25 Jul 2013, 02:59 PM
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

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 30 Jul 2013, 09:59 AM
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.
0
Fendhika
Top achievements
Rank 1
answered on 02 Mar 2017, 04:02 AM

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

0
Vessy
Telerik team
answered on 02 Mar 2017, 04:10 PM
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.
Tags
ImageEditor
Asked by
Leo
Top achievements
Rank 2
Answers by
Vessy
Telerik team
Fendhika
Top achievements
Rank 1
Share this question
or