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

Crop twice and save twice

3 Answers 166 Views

ImageEditor

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

Saeid Kdaimati asked on 08 Apr 2014, 09:13 AM

Hi,
I have the following scenario:

Upload a photo.
If it is a landscape photo, then it should be cropped 16*9, other wise it is up to the user.
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.
After saving, reset crop setting to apply a new ratio.
Crop the photo again, make sure it is more than 300px X 300px.
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>

3 Answers, 1 is accepted

answered on 09 Apr 2014, 07:10 PM

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.