Saving a cropped image

2 posts, 0 answers
  1. Adam Steckel
    Adam Steckel avatar
    3 posts
    Member since:
    Aug 2008

    Posted 10 Feb 2014 Link to this post

    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
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 13 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top