Saving a cropped image

[Adam Steckel]

Hi,

I'm trying to save a cropped image, it seems to crop in the browser, but when I try to save that image, it saves the original.... I've tried to the the apply changes method, or calling editImageOnServer, but I'm not getting anywhere. It seems that if I just call the saveImageOnServer method in my javascript, it calls the image load function again, and reloads the original image, which means that when the ImageSaving function is called, it also uses the original image.

Help!!!!  I've put some of my code snippets below - I can't see a way to get to save the changes to the image, or to pass the arguments into the ImageEditing function on the server, which never seems to get called

<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">

 

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

  

    <div style="margin-bottom: 25px;">

        <asp:Label ID="lblError" runat="server" EnableViewState="false" Style="color: Red; font-size: 16px;" /><br />

    </div>

 

    <telerik:RadScriptBlock runat="server">

        <script type="text/javascript">

            function OnClientFilesUploaded(sender, args) {

                $find('<%= RadAjaxManager1.ClientID %>').ajaxRequest();

            }

        </script>

    </telerik:RadScriptBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="false">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

    <div id="dwndWrapper">

        <telerik:RadAsyncUpload ID="AsyncUpload1" runat="server"

            OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="AsyncUpload1_FileUploaded"

            MaxFileSize="2097152" AllowedFileExtensions="jpg,png,gif,bmp"

            AutoAddFileInputs="false" Localization-Select="Upload Image" />

        <asp:Label ID="Label1" Text="*Size limit: 2MB" runat="server" Style="font-size: 10px;"></asp:Label>

    </div>

    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"

        Width="300px" Height="300px" ExternalDialogsPath="~/user" ToolsFile="~/user/tools.xml"

        OnImageSaving="RadImageEditor1_ImageSaving"

        OnClientCommandExecuting="modifyCommand" CanvasMode="No">

        

    </telerik:RadImageEditor>

</asp:Content>




<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server">
    <telerik:RadCodeBlock ID="codeblock1" runat="server">
        <script type="text/javascript">

            function modifyCommand(imageEditor, args) {

                if (args.get_commandName() == "Crop") {
                    waitForCommand(imageEditor, args.get_commandName(), function (widget) {
                        var width = 149;
                        var height = 170;
                        var ratio = width / height;

                        //stop the aspect ratio constraint
                        //widget._constraintBtn.set_checked(false);
                        //widget._setCropBoxRatio(null);
                        //widget._sizeRatio = null;

                        widget._setCropBoxRatio(ratio);
                        widget._sizeRatio = ratio;
                        widget.set_width(width);
                        widget.set_height(height);
                        widget._constraintBtn.set_enabled(false);
                        widget._updateCropBoxFromControls();

                    });

                }
                if (args.get_commandName() == "Save") {
//doesn't work
                    setTimeout(function () {
                        $find("<%=RadImageEditor1.ClientID %>").applyChangesOnServer();
                    }, 300) ;

                    var filename = imageEditor.getEditableImage();.
//gives error about being unable to deserialize an empty string
                    imageEditor.editImageOnServer("Crop", "Crop", "Crop", callbackFunction);
                    imageEditor.saveImageOnServer(filename, true);
                    imageEditor.setToggleState('Save', false);
                    args.set_cancel(true);
                }
            }



                function callbackFunction(clientData, serverData) {
                    var imgEditor = $find("<%=RadImageEditor1.ClientID %>");
                    imgEditor.getEditableImage()._finishReset();
                }

'always called, always loads original image
  Protected Sub RadImageEditor1_ImageLoading(sender As Object, args As ImageEditorLoadingEventArgs)
        '  Handle Uploaded images
        If Not [Object].Equals(Context.Cache.[Get](Session.SessionID + "UploadedFile"), Nothing) Then
            Using image As New EditableImage(DirectCast(Context.Cache.[Get](Session.SessionID + "UploadedFile"), MemoryStream))
                args.Image = image.Clone()
                args.Cancel = True
            End Using
        End If
    End Sub
'saves original image, not cropped one seen on screen
    Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As Telerik.Web.UI.ImageEditorSavingEventArgs)
        'Save the image to a custom location
        Dim fullPath As String = Server.MapPath("~/temp")
        Dim fileName As String = String.Format("test-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss"))
        fullPath = Path.Combine(fullPath, fileName)

        Dim img As Telerik.Web.UI.ImageEditor.EditableImage = args.Image


        Try

            img.Image.Save(fullPath)
            'lblError.Text = "File Saved";
            args.Argument = [String].Format("The image is saved under the name: <strong>{0}</strong>.", fileName)

            args.Cancel = True
        Catch ex As Exception
            args.Argument = ex.Message
        End Try

    End Sub

'never called
    Protected Sub RadImageEditor1_ImageEditing(sender As Object, args As ImageEditorEditingEventArgs)
        args.Cancel = True


    End Sub

[Vessy]

Hello Adam,

The experienced behavior is most probably connected with a know bug, which is already logged into our bug-tracking system. You can track its progress here: A large uploaded image is not saved properly after cropping in disabled CanvasMode. I have contacted our developers in order to increase the priority of the bug but still I cannot give any firm estimate for when it will be fixed.

Please, excuse us for the inconveniences caused.

Regards,
Veselina Raykova
Telerik