Crop twice and save twice

4 posts, 0 answers
  1. Saeid Kdaimati
    Saeid Kdaimati avatar
    48 posts
    Member since:
    May 2006

    Posted 08 Apr 2014 Link to this post

    Hi,
    I have the following scenario:
    1. Upload a photo.
    2. If it is a landscape photo, then it should be cropped 16*9, other wise it is up to the user.
    3. Save the photo: I don't need the save dialog to shows up, before saving I need to validate the photo dimensions then save using server side code.
    4. After saving, reset crop setting to apply a new ratio.
    5. Crop the photo again, make sure it is more than 300px X 300px.
    6. Save: at this stage I need to resize the photo to become 300px X 300px then save it again using server side code

    My questions are:
    1. How to disable the controls on crop dialog like the dropdown menu and the textboxes.
    2. How to fire save event on server side and access the modified photo.

    <script type="text/javascript">
               function OnClientFilesUploaded(sender, args) {
                   $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest();
               }
     
               var width;
               var height;
               var heightAfterCrop;
               var imageVer1Saved=0; //Sould set to true after saving the 16X9 version
               function OnClientImageLoad(imageEditor) {
                   imageEditor.zoomBestFit();
                   waitForCommand(imageEditor, 'Crop', function (widget) {
                       width = imageEditor.getEditableImage().get_width();
                       height = imageEditor.getEditableImage().get_height();
                       if (width >= height) {
                           var ratio = 16 / 9;
                           heightAfterCrop = width / 16 * 9;
     
                           //Panoramic photos
                           if (height < heightAfterCrop) {
                               heightAfterCrop = height;
                               width = heightAfterCrop / 9 * 16;
                           }
                           //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(heightAfterCrop);
                           widget._constraintBtn.set_enabled(false);
                           widget._swapBtn.set_enabled(false);
                           widget._updateCropBoxFromControls();
                            
                       }
                   });
                   imageEditor.executeCommand("Crop");
               }
     
               function waitForCommand(imageEditor, commandName, callback) {
                   var timer = setInterval(function () {
                       var widget = imageEditor.get_currentToolWidget();
                       if (widget && widget.get_name() == commandName) {
                           clearInterval(timer);
                           callback(widget);
                       }
                   }, 100);
               }
     
               function modifyCommand(imageEditor, args) {
                   if (imageVer1Saved == 1)
                   {
                       if (args.get_commandName() == "Crop") {
                           waitForCommand(imageEditor, args.get_commandName(), function (widget) {
                               width = 300;
                               height = 300;
                               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();
                           });
                       }
                   }
               }
               function OnClientSaving(sender, eventArgs) {
                   //Some validation
                   //if (true) {
                   //    Save using server side code
                   //}
               }
               function OnClientSaved(sender, eventArgs) {
                   imageVer1Saved += 1;
               }
           </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 class="borderFullWidthBoxSection">
           <div class="formSection">
               <h1>Upload new photo</h1>
               <div class="formContent">
                   <telerik:RadAsyncUpload ID="AsyncUpload1" runat="server"
                       OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="AsyncUpload1_FileUploaded"
                       MaxFileSize="4194304" AllowedFileExtensions="jpg,png,gif,bmp"
                       AutoAddFileInputs="false" Localization-Select="Browse" Skin="Silk" HideFileInput="true" />
     
                   <asp:Label ID="Label1" Text="*Size limit: 4MB" runat="server" Style="font-size: 10px;"></asp:Label>
                   <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="850" Height="550"
                       OnImageLoading="RadImageEditor1_ImageLoading" OnClientImageLoad="OnClientImageLoad" OnClientCommandExecuted="modifyCommand" Skin="Silk" OnClientSaved="OnClientSaved" OnClientSaving="OnClientSaving" >
                       <Tools>
                           <telerik:ImageEditorToolGroup>
                               <telerik:ImageEditorTool CommandName="Save" IsToggleButton="true"></telerik:ImageEditorTool>
                               <telerik:ImageEditorToolStrip CommandName="Undo">
                               </telerik:ImageEditorToolStrip>
                               <telerik:ImageEditorToolStrip CommandName="Redo">
                               </telerik:ImageEditorToolStrip>
                               <telerik:ImageEditorTool Text="Reset" CommandName="Reset" />
                                </telerik:ImageEditorToolGroup>
           <telerik:ImageEditorToolGroup>
                               <telerik:ImageEditorTool CommandName="Crop"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="Resize"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="FlipVertical" ToolTip="Flip Image Vertically"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="FlipHorizontal" ToolTip="Flip Image Horizontally"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="RotateRight" ToolTip="Rotate Right by 90 degrees"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="RotateLeft" ToolTip="Rotate Left by 90 degrees"></telerik:ImageEditorTool>
                <telerik:ImageEditorTool Text="Add Text" CommandName="AddText" IsToggleButton="true" />
               <telerik:ImageEditorToolSeparator />
                               <telerik:ImageEditorTool CommandName="ZoomIn" ToolTip="Zoom In"></telerik:ImageEditorTool>
                               <telerik:ImageEditorTool CommandName="ZoomOut" ToolTip="Zoom Out"></telerik:ImageEditorTool>
                           </telerik:ImageEditorToolGroup>
                           <telerik:ImageEditorToolGroup>
               <telerik:ImageEditorTool Text="Brightness Contrast" CommandName="BrightnessContrast" IsToggleButton="true" />
               <telerik:ImageEditorTool Text="Invert Color" CommandName="InvertColor" />
               <telerik:ImageEditorTool Text="Sepia" CommandName="Sepia" />
               <telerik:ImageEditorTool Text="Greyscale" CommandName="Greyscale" />
               <telerik:ImageEditorTool Text="Hue Saturation" CommandName="HueSaturation" IsToggleButton="true" />
           </telerik:ImageEditorToolGroup>
           <telerik:ImageEditorToolGroup>
               <telerik:ImageEditorTool Text="Pencil" CommandName="Pencil" IsToggleButton="true" />
               <telerik:ImageEditorTool Text="Draw Circle" CommandName="DrawCircle" IsToggleButton="true" />
               <telerik:ImageEditorTool Text="Draw Rectangle" CommandName="DrawRectangle" IsToggleButton="true" />
               <telerik:ImageEditorTool Text="Line" CommandName="Line" IsToggleButton="true" />
           </telerik:ImageEditorToolGroup>
                       </Tools>
                   </telerik:RadImageEditor>
               </div>
           </div>
       </div>

  2. Saeid Kdaimati
    Saeid Kdaimati avatar
    48 posts
    Member since:
    May 2006

    Posted 08 Apr 2014 in reply to Saeid Kdaimati Link to this post

    Hi,

    I found a solution for saving on http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx

    My question become:
    1. How to disable the controls on crop dialog like the dropdown menu and the textboxes so user can not overright the ratio.
    2. How to resize the photo before saving?

    Thank you in advance
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saeid Kdaimati
    Saeid Kdaimati avatar
    48 posts
    Member since:
    May 2006

    Posted 08 Apr 2014 in reply to Saeid Kdaimati Link to this post

    I found a solution for saving on: http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx

    But still wonder about how to disable the controls on crop dialog like the dropdown menu and the textboxes? and how to resize a photo on server before saving?
  5. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 09 Apr 2014 Link to this post

    Hi Saeid,

    The ImageEditor's dialogs can be customized by enabling the control's external dialogs. Detailed information on the subject is available in the following live demo: Customize Built-in Dialog

    Regarding the image resizing - you can do it just before the image is saved into the ImageSaving event-handle, using the EditableImage's Resize() method. For example:
    protected void RadImageEditor1_ImageSaving(object sender, ImageEditorSavingEventArgs args)
    {
        string fullPath = Server.MapPath("../../images/testImages");
        string fileName = string.Format("relax-{0}.jpg", DateTime.Now.ToString("yyyyMMdd-hhmmss"));
        fullPath = Path.Combine(fullPath, fileName);
        Telerik.Web.UI.ImageEditor.EditableImage img = args.Image;
        img.Resize(100, 200);
        img.Image.Save(fullPath);
        args.Argument = String.Format("The image is saved under the name: <strong>{0}</strong>.", fileName);
     
        args.Cancel = true;
    }

    I hope this information will be helpful for you.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top