Manually Trigger Crop Event

4 posts, 0 answers
  1. Frank
    Frank avatar
    4 posts
    Member since:
    Dec 2011

    Posted 13 Dec 2012 Link to this post

    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
  2. Vessy
    Admin
    Vessy avatar
    1381 posts

    Posted 18 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Frank
    Frank avatar
    4 posts
    Member since:
    Dec 2011

    Posted 11 Jan 2013 Link to this post

    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
  5. Vessy
    Admin
    Vessy avatar
    1381 posts

    Posted 15 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top