Hi,
I have the following scenario:
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
>
</
div
>
</
div
>