Hey guys,
In my form I have an file upload control which uploads an image for the radimageeditor. I forced the radimageeditor to automaticly call the cropping feature when an image is loaded. To improve the usability Ive hidden the cropping settings form. The problem now is that if I click on the "Button1" the image will be cropped for just a second and after the postback the image isnt cropped anymore. If i do it in two steps:
1. Click on a button which fires the applyModifications() javascript methond
2. Click on a button which fires the postback
everything is fine but I want to do that in just one step. Is there any solution for such a Problem?
This is the current asp.net markup code:
This is the code behind:
Kind regards,
Frank Rademacher
In my form I have an file upload control which uploads an image for the radimageeditor. I forced the radimageeditor to automaticly call the cropping feature when an image is loaded. To improve the usability Ive hidden the cropping settings form. The problem now is that if I click on the "Button1" the image will be cropped for just a second and after the postback the image isnt cropped anymore. If i do it in two steps:
1. Click on a button which fires the applyModifications() javascript methond
2. Click on a button which fires the postback
everything is fine but I want to do that in just one step. Is there any solution for such a Problem?
This is the current asp.net markup code:
<
telerik:RadAsyncUpload
ID
=
"AsyncUpload1"
runat
=
"server"
OnFileUploaded
=
"AsyncUpload1_FileUploaded"
MaxFileSize
=
"524288"
AllowedFileExtensions
=
"jpg,png,gif,bmp"
AutoAddFileInputs
=
"false"
/>
<
asp:Button
ID
=
"Button3"
Text
=
"Upload Image"
runat
=
"server"
CausesValidation
=
"False"
/><
br
/>
<
telerik:RadImageEditor
id
=
"theImageEditor"
runat
=
"server"
Width
=
"400"
Height
=
"400"
onclientcommandexecuted
=
"modifyCommand"
OnClientLoad
=
"OnClientLoad"
OnImageLoading
=
"theImageEditor_ImageLoading"
>
</
telerik:RadImageEditor
>
<
asp:Button
ID
=
"Button1"
Text
=
"Crop"
runat
=
"server"
OnClick
=
"Button1_Click"
OnClientClick
=
"applyModifications();"
/>
<
style
>
.rieDraggableResizeHandle
{
display: none;
}
.RadImageEditor .rieToolBar
{
display: none;
}
.rieResizeHandle
{
display: none;
}
</
style
>
<
script
type
=
"text/javascript"
>
function modifyCommand(imageEditor, args) {
if (args.get_commandName()) {
waitForCommand(imageEditor, args.get_commandName(), function (widget) {
if (widget._constraintBtn != null) {
widget._constraintBtn.set_checked(false); //stop the aspect ration constraint
widget.set_width(200);
widget.set_height(300);
widget._widthTxt.disabled = true;
widget._heightTxt.disabled = true;
widget._updateCropBoxFromControls();
}
});
}
}
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 OnClientLoad(sender, eventArgs) {
//executer la commende Crop
var imageEditor = $telerik.toImageEditor(sender);
imageEditor.fire("Crop", eventArgs);
var imageEditorId = imageEditor.get_id();
//cacher le dialog box
$('#' + imageEditorId + '_ToolsPanel').hide();
}
function applyModifications() {
var x = $find("<%=theImageEditor.ClientID %>");
var txtx = $("#<%=theImageEditor.ClientID %>_ToolsPanel_C_txtX").val();
var txty = $("#<%=theImageEditor.ClientID %>_ToolsPanel_C_txtY").val();
var txtWidth = $("#<%=theImageEditor.ClientID %>_ToolsPanel_C_txtWidth").val();
var txtHeight = $("#<%=theImageEditor.ClientID %>_ToolsPanel_C_txtHeight").val();
var xy = new Sys.UI.Bounds(
parseInt(txtx),
parseInt(txty),
parseInt(txtWidth),
parseInt(txtHeight));
x._cropImage(xy);
x.applyChangesOnServer();
}
</
script
>
This is the code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Context.Cache.Remove(Session.SessionID + "UploadedFile");
}
// Initially fill the imageeditor with an image
theImageEditor.ImageUrl = "~/_layouts/images/Design/background.png";
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Drawing.Image image = theImageEditor.GetEditableImage().Image;
byte[] imageData = getBytesFromImage(image);
// save the theoretically cropped image to the file system
using (BinaryWriter binWriter = new BinaryWriter(File.Open(@"C:\Test.png", FileMode.Create)))
{
binWriter.Write(imageData);
}
}
private byte[] getBytesFromImage(System.Drawing.Image image)
{
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
return ms.ToArray();
}
protected void theImageEditor_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
{
//Handle Uploaded images
if (!Object.Equals(Context.Cache.Get(Session.SessionID + "UploadedFile"), null))
{
using (EditableImage image = new EditableImage((MemoryStream)Context.Cache.Get(Session.SessionID + "UploadedFile")))
{
args.Image = image.Clone();
args.Cancel = true;
}
}
}
protected void AsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
//Clear changes and remove uploaded image from Cache
theImageEditor.ResetChanges();
Context.Cache.Remove(Session.SessionID + "UploadedFile");
using (Stream stream = e.File.InputStream)
{
byte[] imgData = new byte[stream.Length];
stream.Read(imgData, 0, imgData.Length);
MemoryStream ms = new MemoryStream();
ms.Write(imgData, 0, imgData.Length);
Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);
}
}
Kind regards,
Frank Rademacher