Crop twice and save twice

[Saeid Kdaimati]

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>

[Saeid Kdaimati]

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

[Saeid Kdaimati]

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?

[Vessy]

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