Manually Trigger Crop Event

[Dirk]

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:

<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

[Vessy]

Hi Frank,

The experienced issue is caused by the PostBack, made by Buton1. In order to fix it you will need to do the following changes to your project:

1. Set the CanvasMode of the ImageEditor to "No"
2. Remove the handler of the Button1.Click() server-event and move the code from it to the handler of the ImageEditor's OnImageChanged() server event.
3. Extend the OnClientClick() handler of the Button1 in order to prevent it from making a PostBack

Bellow you could see the modified code:

ASPX:

<telerik:RadImageEditor ID="theImageEditor" runat="server" Width="500" Height="500" CanvasMode="No"
    OnClientCommandExecuted="modifyCommand" OnClientLoad="OnClientLoad" OnImageLoading="theImageEditor_ImageLoading" OnImageChanged="theImageEditor_ImageChanged">
</telerik:RadImageEditor>
<asp:Button ID="Button1" Text="Crop" runat="server" OnClientClick="applyModifications(); return false;" />

C#:

protected void theImageEditor_ImageChanged(object sender, ImageEditorEventArgs 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);
    }
}

Regards,
Vesi
the Telerik team

[Dirk]

Hello again,
Ive used your changes to get our application running but when the "theImageEditor_ImageChanged" event is fired, any changes made to any control(like changing the text of a textbox) aren't available.  I've created a sample solution for better understanding which you can find here:

http://85.214.46.60/Files/TelerikImageCropDemo.zip

If you run the sample do the following steps:
-> Change the value of the textbox from "Dummy" to anything else.
-> Press "Crop"

The event "theImageEditor_ImageChanged" is fired but in its function you can't get the current value of the textbox. Also you can't render any new controls in this event.

protected void theImageEditor_ImageChanged(object sender, ImageEditorEventArgs e)
    {
        System.Drawing.Image image = theImageEditor.GetEditableImage().Image;
        byte[] imageData = getBytesFromImage(image);

        //the textbox text will always be to old initial value
        string text = tbDummy.Text;

        // Its also impossible to render out any controls in this event
        Controls.Add(new LiteralControl("test"));
    }

Is there any solution for this problem?

Kind regards,
Frank

[Vessy]

Hi Frank,

The ImageEditor updates itself on a CallBack, while the page renders itself on a PostBack. This is why you do not have access to the updated information on the page inside the ImageEditor's Server events (and you are not able to create new controls). A similar issue has already been discussed in the following forum tread: ImageSaving doesn't update other controls on page

Also, I believe that you could find useful information about the Callbacks on the following article: Callback WebControls.

Kind regards,
Vesi
the Telerik team