Can't save the edited image

27 posts, 1 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Oct 2012

    Posted 18 Oct 2012 Link to this post

    Hello, I just updated to the Q3 release and I now can't seem to save my edited image with the RadImageEditor. After I crop an image and use the SaveEditableImage (server side) I can only save the original image. I have also tried getting the editable image first using GetEditableImage() but it too returns the original image.

    Thanks,
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 19 Oct 2012 Link to this post

    Hi Michael,

    In the new release of RadControls the ImageEditor has a CanvasMode impelemented, which set to default mode of the editor. Currently, this mode supports only Client-side events, so if there is some Server-side implementation in your project you will need to set the ImageEditor's CanvasMode property to "No":
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" CanvasMode="No">
    </telerik:RadImageEditor>


    All the best,
    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. An
    An avatar
    2 posts
    Member since:
    Dec 2008

    Posted 25 Oct 2012 Link to this post

    I use custom provider, and set RadImageEditor.CanvasMode="No",  still can't save the crop image, it saved the original image on StoreBitmap function. I use firebug get the RadImageEditor still use canvas.
    FileManagerDialogParameters imageEditorParameters = new FileManagerDialogParameters();
                imageEditorParameters.UploadPaths = items;
                imageEditorParameters.MaxUploadFileSize = 5000000;
                imageEditorParameters.FileBrowserContentProviderTypeName = typeof(UserImageManagerProvider).AssemblyQualifiedName;
     
                DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imageEditorParameters);
                imageEditor.Width = System.Web.UI.WebControls.Unit.Pixel(832);
                imageEditor.Height = System.Web.UI.WebControls.Unit.Pixel(550);
                imageEditor.Parameters["ExternalDialogsPath"] = "~/UserControl/ImageEditors/";
                imageEditor.ReloadOnShow = true;
                imageEditor.Modal = true;
                imageEditor.Title = "Edit Photo";
                imageEditor.Behaviors = WindowBehaviors.Resize | WindowBehaviors.Move | WindowBehaviors.Close;
                ImageEditorDialog ied = new ImageEditorDialog();
     
                opener.DialogDefinitions.Add("ImageEditor", imageEditor);
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor" TagPrefix="tools" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Widgets" TagPrefix="widgets" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Dialogs" TagPrefix="dialogs" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <script type="text/javascript">
        var $ = $telerik.$;
        var $T = Telerik.Web.UI;
     
        Type.registerNamespace("Telerik.Web.UI.Widgets");
     
        Telerik.Web.UI.Widgets.ImageEditor = function (element)
        {
            Telerik.Web.UI.Widgets.ImageEditor.initializeBase(this, [element]);
            this._clientParameters = null;
            this._ajaxPanel = null;
            this._imageEditor = null;
            this._originalImageLocation = null;
            this._saveDataControl = null;
     
            this._suffix = "_cut";
            this._name = "";
            this._src = "";
        }
     
        Telerik.Web.UI.Widgets.ImageEditor.prototype =
    {
        initialize: function ()
        {
            Telerik.Web.UI.Widgets.ImageEditor.callBaseMethod(this, "initialize");
            this.setupChildren();
            //Intialize ajax panel handlers
            this._attachAjaxPanelHandlers();
        },
     
        setupChildren: function ()
        {
            this._imageEditor = $find("RadImageEditor1");
            this._ajaxPanel = $find("RadAjaxPanel1");
            this._originalImageLocation = $get("OriginalImageLocation");
            this._saveDataControl = $get("SaveData");
            this._newImageNameControl = $get("NewImageName");
            this._overrideExistingControl = $get("OverwriteExistingCheckBox");
     
            //Save button
            this._saveButton = $get("saveThumbnail");
            this._saveButton.title = localization["Save"];
            $addHandlers(this._saveButton, { "click": this._saveButtonClickHandler }, this);
            this._cancelButton = $get("CancelButton");
            this._cancelButton.title = localization["Cancel"];
        },
     
        _attachAjaxPanelHandlers: function ()
        {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(Function.createDelegate(this, this._onAjaxResponseEnd));
        },
     
        _onAjaxResponseEnd: function ()
        {
            this.set_imageEditor($find("RadImageEditor1"));
        },
     
        clientInit: function (clientParameters)
        {
            this._clientParameters = clientParameters;
            this._name = clientParameters.name;
            if (clientParameters.suffix != null)
            {
                this.set_suffix(clientParameters.suffix);
            }
            //Reset SaveData field value
            this._saveDataControl.value = "";
            this.set_src(clientParameters.imageSrc);
            this._resetNewImageName();
        },
     
        _resetNewImageName: function ()
        {
            var src = this.get_src();
     
            //Set the proposed thumbname in the name input
            var newName = this._name ? this._name : src.substring(src.lastIndexOf("/") + 1);
            var dotPos = newName.lastIndexOf(".");
            if (dotPos != -1)
            {
                $get("NewImageExt").innerHTML = newName.substring(dotPos);
                newName = newName.substring(0, dotPos);
            }
            newName += this.get_suffix();
            this.set_newImageName(newName);
        },
     
        _saveButtonClickHandler: function (e)
        {
            var separator = ":";
     
            var name = this.get_newImageName() + $get("NewImageExt").innerHTML;
            if (!name || name.indexOf(separator) != -1)
            {
                alert(localization["MessageCannotWriteToFolder"]);
                return;
            }
     
            var sb = new Sys.StringBuilder("");
            sb.append(this._overrideExistingControl.checked ? "true" : "false");
            sb.append(separator);
            sb.append(name);
     
            this._saveDataControl.value = sb.toString();
            this._ajaxPanel.ajaxRequest();
        },
     
        dispose: function ()
        {
            this.clearHandlers();
            this._imageEditor = null;
            this._ajaxPanel = null;
            this._originalImageLocation = null;
            this._saveDataControl = null;
            this._saveButton = null;
            this._cancelButton = null;
            Telerik.Web.UI.Widgets.ImageEditor.callBaseMethod(this, "dispose");
        },
     
        clearHandlers: function ()
        {
            //Save button - could have remained from earlier phase, prior to AJAX
            if (this._saveButton) $clearHandlers(this._saveButton);
        },
     
        //================================== Properties ================================================//
        get_src: function ()
        {
            //Get src from the hidden field
            return this._src;
        },
     
        set_src: function (src)
        {
            //Set path in the hidden field and if not available, use src
            this._src = src;
            var field = this._originalImageLocation;
            var oldValue = field.value;
            field.setAttribute("value", src);
            if (oldValue != src)
            {
                //Set the src of the image in RadImageEditor. This makes the next ajax request invisible for the user.
                this.set_previewImageSrc(src);
                //Send an ajax request the ImageUrl property of RadImageEditor gets initialized on the server.
                this._ajaxPanel.ajaxRequest();
            }
        },
     
     
        set_previewImageSrc: function (value)
        {
            var previewImage = this.get_editableImage();
            if (previewImage)
            {
                previewImage.src = value;
            }
        },
     
        get_editableImage: function ()
        {
            var editableImage = this.get_imageEditor().getEditableImage();
            var image = editableImage.getImage();
            if (typeof (image) == "undefined") image = null;
            return image;
        },
     
        get_imageEditor: function ()
        {
            if (!this._imageEditor || typeof (this._imageEditor.getEditableImage().getImage()) == "undefined")
            {
                this._imageEditor = $find("RadImageEditor1");
            }
            return this._imageEditor;
        },
     
        set_imageEditor: function (value)
        {
            this._imageEditor = value;
        },
     
        get_newImageName: function ()
        {
            return this._newImageNameControl.value;
        },
     
        set_newImageName: function (value)
        {
            this._newImageNameControl.value = value;
        },
     
        get_suffix: function ()
        {
            var suffix = this._suffix;
            return suffix ? suffix : "";
        },
     
        set_suffix: function (suffix)
        {
            this._suffix = suffix;
        }
    }
     
        Telerik.Web.UI.Widgets.ImageEditor.registerClass("Telerik.Web.UI.Widgets.ImageEditor", Telerik.Web.UI.RadWebControl, Telerik.Web.IParameterConsumer);
    </script>
    <style type="text/css">
        /* Hide RadImageEdior borders*/
        div.RadImageEditor
        {
            border: 0;
            padding: 0;
        }
     
        div.rieContentArea
        {
            border: 0;
        }
     
        div.rieStatusBar
        {
            padding-left: 5px;
        }
        .reDraggableResizeBox .resizerHandle
        {
            cursor:pointer!important;
            background:none repeat scroll 0 0 transparent!important;
        }
        .rieResizeButtons
        {
            display:none!important;
        }
        .reDraggableResizeBox{ border-color:Red!important;}
    </style>
     
     
    <table cellpadding="0" cellspacing="0" style="width: 100%;">
        <tr>
            <td>
                <input type="hidden" id="OriginalImageLocation" name="OriginalImageLocation" />
                <input type="hidden" id="SaveData" name="SaveData" />
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Height="450" Width="816" EnableResize="false"
                        OnClientCommandExecuting="OnClientCommandExecuting"
                        OnClientCommandExecuted="OnClientCommandExecuted"
                        OnClientLoad="OnClientLoad" CanvasMode="No">
                        <Tools>
                            <telerik:ImageEditorToolGroup>
                                <%--<telerik:ImageEditorTool CommandName="Print" />
                                <telerik:ImageEditorToolSeparator />--%>
                                <telerik:ImageEditorToolStrip CommandName="Undo" />
                                <telerik:ImageEditorToolStrip CommandName="Redo" />
                                <telerik:ImageEditorTool CommandName="Reset" />
                                <telerik:ImageEditorToolSeparator />
                                <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true"/>
                                <telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true"/>
                                <telerik:ImageEditorTool CommandName="Zoom" IsToggleButton="true"/>
                                <telerik:ImageEditorTool CommandName="ZoomIn"/>
                                <telerik:ImageEditorTool CommandName="ZoomOut"/>
                                <telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true"/>
                                <telerik:ImageEditorTool CommandName="RotateRight" />
                                <telerik:ImageEditorTool CommandName="RotateLeft" />
                                <telerik:ImageEditorTool CommandName="FlipVertical" />
                                <telerik:ImageEditorTool CommandName="FlipHorizontal" />
                                <telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />
                            </telerik:ImageEditorToolGroup>
                        </Tools>
                    </telerik:RadImageEditor>
                </telerik:RadAjaxPanel>
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0" style="width: 100%;padding: 10px 0 5px 0;">
        <tr style="display:none;">
            <td style="text-align: right; padding-right: 5px;">
                <label for="NewImageName">
                    <script type="text/javascript">
                        document.write(localization["SaveAs"]);
                    </script>
                </label>
            </td>
            <td>
                <input type="text" id="NewImageName" name="NewImageName" style="margin-left: 4px; width: 260px;" /><span id="NewImageExt"> </span>
            </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td colspan="2" style="display:none;">
                <input checked="checked" type="checkbox" id="OverwriteExistingCheckBox" style="margin-left: "/>
                <label for="OverwriteExistingCheckBox">
                    <script type="text/javascript">
                        document.write(localization["OverwriteExisting"]);
                    </script>
                </label>
            </td>
            <td style="text-align: right; padding-right: 5px;">
                <button type="button" id="saveThumbnail" style="width: 100px;">
                    <script type="text/javascript">
                        setInnerHtml("saveThumbnail", localization["Save"]);
                    </script>
                </button>
                <button type="button" id="CancelButton" onclick="Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close();" style="width: 100px;">
                    <script type="text/javascript">
                        setInnerHtml("CancelButton", localization["Cancel"]);
                    </script>
                </button>
            </td>
        </tr>
    </table>
    public class UserImageManagerProvider : Telerik.Web.UI.Widgets.FileSystemContentProvider
        {
            /// <summary>
       
            public UserImageManagerProvider(System.Web.HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag)
                : base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)
            {
            }
            /// <summary>
            ///
            /// </summary>
            /// <param name="path"></param>
            /// <returns></returns>
            public override string DeleteFile(string path)
            {
                //return string.Empty;
                return base.DeleteFile(path);
            }
            /// <summary>
            ///
            /// </summary>
            /// <param name="bitmap"></param>
            /// <param name="url"></param>
            /// <param name="format"></param>
            /// <returns></returns>
            public override string StoreBitmap(System.Drawing.Bitmap bitmap, string url, System.Drawing.Imaging.ImageFormat format)
            {
                #region for new version telerik -- not rewrite original image, only add dupliate suffix
                string suffix = Path.GetExtension(url);
                if (url.EndsWith(suffix + suffix))
                {
                    url = url.Substring(0, url.Length - suffix.Length);
                }
                #endregion
                string result = base.StoreBitmap(bitmap, url, format);
     
                 
                return result;
            }
            /// <summary>
            ///
            /// </summary>
            /// <param name="folderPath"></param>
            /// <returns></returns>
            public override bool CheckWritePermissions(string folderPath)
            {
                return true;
            }
     
            public override bool CheckDeletePermissions(string folderPath)
            {
                return true;
            }
             
        }
  5. timmy
    timmy avatar
    38 posts
    Member since:
    Dec 2006

    Posted 25 Oct 2012 Link to this post

    Hi,

    I too cannot save an edited image. I am using Q3 2012 for Framework 4.5 but I am using the ImageEditor as part of the HTML Editor. I can edit an image, re-size, add text etc. but when I click save it reverts back to the original image. What setting do I need to change to modify this?

    Thanks

    Tim Metcalfe
  6. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 30 Oct 2012 Link to this post

    Hi,

    I have tested both of the scenarios - the one with the Editor, using external dialogs and the one with the stand alone ImageEditor dialog (I have just put it into an ImageManager for testing purposes). I have set the CanvasMode property of the ImageEditor to "No" and that fixed the saving problem on my side.

    A possible reason for both of the experienced issues could be the version of the external dialogs, used in your applications. When you are using external dialogs in an RadEditor, it is highly recommended to verify that you use the EditorDialogs (or ImageEditorDialogs) folder from the same installation and after that to customize the new dialogs files from scratch.

    For your convenience I am attaching a sample project, including the last version of the controls and the Editor's dialogs from the same installation folder, so you could examine them on your side. It includes two pages - one including an Editor and one with a button, opening an ImageManager. Along with the disabling of the ImageEditor's canvas mode I attached a handler to the ImageEditor's OnClientLoad event to display an alert, just to be sure that the controls are using the external ImageEditor.ascx dialog (not the built-in one):
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Height="450" Width="816" EnableResize="false" OnClientLoad="OnClientLoad" CanvasMode="No">
    ...
    </telerik:RadImageEditor>
    </telerik:RadAjaxPanel>
    <script type="text/javascript">
        function OnClientLoad(imageEditor, args) {
            alert("Alert from ImageEditor.ascx");
        }
    </script>

    @An:  Please, check the ImageManager_standAloneCustomized page - I have added the provided by you custom content provider, but not all of the changes in the ImageEditor.ascx dialog. If it works correctly with these settings, it shouldn't be any further issues after you apply your dialog's customizations.

    @Tim: Please, check the Editor_ExternalPaths page - I have just set the ExternalDialogpaths of the Editor and disabled the above mentioned CanvasMode property in the ImageEditor.ascx dialog.

    Please, give the examples a try and let me know if you need any further assistance.

    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.
  7. timmy
    timmy avatar
    38 posts
    Member since:
    Dec 2006

    Posted 04 Nov 2012 Link to this post

    Ok, this is becoming unnecessarily complicated. I am using the standard HTML editor and I am not altering its behaviour in anyway with custom dialog boxes. When using the built in ImageEditor, I cannot save an edited image. It was working fine until the latest Q3 release. What do I need to do so the edited image will be saved? There does not seem to be an option in the HTML editor to switch the canvas mode off.
  8. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 06 Nov 2012 Link to this post

    Hi Tim,

    I am afraid to say that currently setting the ImageEditor's CanvasMode to "No" is the only way to achieve the desired save on server functionality. The newly implemented CanvasMode extends in times the functionality of the ImageEditor, but still there are features which are not working properly in this mode.  This is why we allow the users to choose whether to use the CanvasMode or the default (Image) mode of the editor. We have already log the issue into our PIT system and we will try to fix it as soon as possible.

    Please, excuse us for the temporary inconveniences.

    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.
  9. timmy
    timmy avatar
    38 posts
    Member since:
    Dec 2006

    Posted 06 Nov 2012 Link to this post

    Can I suggest that when you implement the fix, that you ensure that it is possible to set the canvas option within the HTML Editor? Many people will be using the default image editing facilities that are provided by the HTML Editor and so being able to set the canvas option in the editor makes alot of sense.

    I understand that things don't always go smoothly with updates. Your ASP.Net components are great and so I look forward to a resolution to the above issue.
  10. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 08 Nov 2012 Link to this post

    Hi Tim,

    Thank you for your feature request - I will present it to our developers for further consideration.

    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.
  11. Dru
    Dru avatar
    5 posts
    Member since:
    Aug 2007

    Posted 03 Apr 2013 Link to this post

    So just to be sure here, the ImageEditor won't be able to save the file on the server if CanvasMode="Yes"?  Why is that?  I'm using this control as a way for my customers to be able to edit a photo that they've uploaded to my server.  With this limitation, I can't give them brightness and contrast capabilities, correct?  That is retarded.

    To be honest, I've never been so frustrated with a Telerik control.  I spent 2 days banging my head against my desk trying to figure out why it wouldn't save, until I found this post.  The documentation is terrible for this control.  No where is there an end to end demo on how to edit and save the changed image.  Also, not having a server event for ImageSaved is ridiculous.
  12. timmy
    timmy avatar
    38 posts
    Member since:
    Dec 2006

    Posted 03 Apr 2013 Link to this post

    Dru,

    I upgraded to the latest versions (Q1 2013?) when they were released a couple of weeks ago and they now just work out of the box. I haven't had to mess about with any canvas settings. It looks like it was just the release prior to that one that had an issue.

    Hope that helps you.

    Tim
  13. Dru
    Dru avatar
    5 posts
    Member since:
    Aug 2007

    Posted 04 Apr 2013 Link to this post

    Thanks Tim.  I finally got it all to work by setting CanvasMode="No", but having the latest version is always good.  I kept checking the Telerik Control Panel for updates over the last couple weeks, but it wasn't offering any.  It figures! 

    I'd still like to see their response regarding brightness and contrast and saving the image on the server, as well as a real demo that is useful.
  14. Niko
    Admin
    Niko avatar
    387 posts

    Posted 05 Apr 2013 Link to this post

    Hi Dru,

    The ImageEditor can save image on the server, despite it using canvas or not. The main difference is that when the canvas mode is yes, i.e. the canvas tag is used as the editing engine, then the editing happens only on the client side. Since images are considered large resources - let's assume we are working with 5MB images, then it sounds completely unreasonable to transport back and forth that data through postbacks. Therefore we have developed the Save and Export commands that take care of saving the image.
    Furthermore if you wish to decide when the image to be saved on your own, then you should make sure to call the client-side method saveImageOnServer. Here is more information on client-side API from our help articles - http://www.telerik.com/help/aspnet-ajax/imageeditor-client-side-api.html. There you can find the signature and description of the saveImageOnServer method. On the client-side if you need to know when the image has already been saved, you can use the OnClientSaved event to handle your specific scenarios.

    Finally, there is a server-side event ImageSaving that fires when the image gets saved on the server-side - http://www.telerik.com/help/aspnet-ajax/imageeditor-server-side-events.html.

    In the attached sample page you can see a custom Save command, the built-in Save command and the brightness/contrast command just so that you can edit the image. Just make sure you have the browser console open in order to see the custom argument data sent from the OnImageSaving server-side event.

    Hope this helps.

    All the best,
    Niko
    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.
  15. Dru
    Dru avatar
    5 posts
    Member since:
    Aug 2007

    Posted 10 Apr 2013 Link to this post

    Thanks for your response.  Your example works great for the image you supplied.  It helped me to start from a working example and go from there.  I finally figured out why I've been banging my head against my desk now.  It took me way too long to figure this bug out.  I took your image and edited it with Gimp.  I made it 5000 x 2360 pixels and saved it as jpg which made it about a 200k file.  This file will not work with the demo you supplied.  This file will work fine when CanvasMode="No", but not when it is "Yes".  I thought the whole purpose of canvas mode was to keep everything on the client side due to the potential of large files?  My users take photos with their digital cameras and need the ability to edit them on my site.  The files they will be uploading are sometimes 2mb.  I can't even get a 200k file to work.

    Also, I want to use my own save command so I can hide the save dialog.  The dialog will only confuse the users.  How can I use the save icon for that button instead of the default gear button?

    Thanks,
    Dru
  16. Niko
    Admin
    Niko avatar
    387 posts

    Posted 12 Apr 2013 Link to this post

    Hi Dru,

    It is very likely when working with large images that you have hit a certain limit of transferable JSON content. This limitation is imposed by the AJAX framework. In the ImageEditor we have added a property that you can use to increase the default value of that limit. The property that you should use is in the EditableImageSettings composite property of the ImageEditor and is named MaxJsonLength.
    <EditableImageSettings MaxJsonLength="4097152" />
    The value in the example is almost double the default value and you could go with it in your project. If the issue still persists, then you could try increasing it. Here is the API reference part on this - http://www.telerik.com/help/aspnet-ajax/allmembers_t_telerik_web_ui_imageeditor_editableimageconfiguration.html
    What we should do on our side is describe this particular case in our Troubleshooting section of the RadImageEditor help articles.

    Hope this helps.

    All the best,
    Niko
    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.
  17. Dru
    Dru avatar
    5 posts
    Member since:
    Aug 2007

    Posted 12 Apr 2013 Link to this post

    I did what you said and increased it a lot, but it still doesn't work.  I guess I will just have to forget about the canvas only features for now.

    Regarding the save icon, do you have an answer for that?

    "Also, I want to use my own save command so I can hide the save dialog.  The dialog will only confuse the users.  How can I use the save icon for that button instead of the default gear button?"

    Thanks,
    Dru
  18. Niko
    Admin
    Niko avatar
    387 posts

    Posted 15 Apr 2013 Link to this post

    Hi Dru,

    In order to use the Save icon button you can simply redefine the Save command in the CommandList collection:
    Telerik.Web.UI.ImageEditor.CommandList["Save"] = function (imageEditor, commandName, args)
    {
        var fileName = imageEditor.get_serverImageUrl();
        fileName = fileName.substring(fileName.lastIndexOf("/") + 1);
        imageEditor.saveImageOnServer(fileName, true);
    };
    As far as the canvas mode and large images are concerned, could you, please, open a support ticket and attach a sample runnable project there so that we can investigate why the image does not get saved on the server?

    Hope this helps.

    Greetings,
    Niko
    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.
  19. Manoj
    Manoj avatar
    4 posts
    Member since:
    May 2012

    Posted 12 Jul 2013 Link to this post

    Hi niko,


     Telerik.Web.UI.ImageEditor.CommandList["Save"] = function (imageEditor, commandName, args)
    {
        var fileName = imageEditor.get_serverImageUrl();
        fileName = fileName.substring(fileName.lastIndexOf("/") + 1);
        imageEditor.saveImageOnServer(fileName, true);
    };

    in this method you told to save file in server with a particular name . can u say how to save it to a target folder  by this client side  event . 
    n also i want to save with  file name  dynamically .
  20. Niko
    Admin
    Niko avatar
    387 posts

    Posted 16 Jul 2013 Link to this post

    Hello,

    Please, check the following forum post, where the same question has been asked - http://www.telerik.com/community/forums/aspnet-ajax/image-editor/save-button.aspx. Basically you should implement a custom approach to handling the different location. As far as the name goes, you should implement the logic of building the name according to your own requirements.

    Hope this helps.

    Regards,
    Niko
    Telerik
    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 the blog feed now.
  21. George Fahnbulleh
    George Fahnbulleh avatar
    11 posts
    Member since:
    Apr 2006

    Posted 20 Jul 2013 Link to this post

    This is also an issue for me; however, I would like to implement a workaround.
    1) the image can be saved with a different name. For example photo1.jpg can be saved as photo1x.jpg.
    2) the original image is then deleted
    3) the new image photo1x.jpg is renamed photo1.jpg

    How do I accomplish this in VB.net?
  22. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 24 Jul 2013 Link to this post

    Hello George,

    You can find detailed information on how to save the edited image to a custom location liked in my colleague Niko's previous reply, as well as on the following live demo: Save Image to a Custom Location

    Once the image has been successfully saved on the server, you have to use a standard programing approach for file manipulation, e.g:
    How to: Delete a File in Visual Basic
    How do I rename a file in VBA
    FileSystem.RenameFile Method

    Regards,
    Veselina Raykova
    Telerik
    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 the blog feed now.
  23. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 12 Dec 2013 Link to this post

    Hi, Im using Q3 2012 and also can only save the original image after I edit it (ex: crop). From everything that ive been proposed, I cant see what is wrong in my code. Im my case, im uploading the image first before loading it in the ImageEditor like in this demo

    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" CanvasMode="No" Width="680" Height="450" OnImageLoading="RadImageEditor1_ImageLoading" OnImageSaving="RadImageEditor1_ImageSaving" OnClientSaved="OnClientSaved" OnClientCommandExecuting="OnClientCommandExecuting" ExternalDialogsPath="~/ImageEditorDialogs">
                           <Tools>
                                   <telerik:ImageEditorToolGroup>
                                       <telerik:ImageEditorToolStrip CommandName="Undo" />
                                       <telerik:ImageEditorToolStrip CommandName="Redo" />
                                       <telerik:ImageEditorTool CommandName="Reset" />
                                       <telerik:ImageEditorTool CommandName="Save" ToolTip="Save Image" />
                                       <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="Zoom" />
                                       <telerik:ImageEditorTool CommandName="ZoomIn" />
                                       <telerik:ImageEditorTool CommandName="ZoomOut" />
                                       <telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="Rotate" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="RotateRight" />
                                       <telerik:ImageEditorTool CommandName="RotateLeft" />
                                       <telerik:ImageEditorTool CommandName="Flip" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="FlipVertical" />
                                       <telerik:ImageEditorTool CommandName="FlipHorizontal" />
                                       <telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="InsertImage" IsToggleButton="true" />
                                       <telerik:ImageEditorTool CommandName="Print" />
                                   </telerik:ImageEditorToolGroup>
                           </Tools>
       </telerik:RadImageEditor>
     
       <telerik:RadCodeBlock ID="codeblock1" runat="server">
             <script type="text/javascript">
                 function OnClientCommandExecuting(imEditor, eventArgs) {
                     if (eventArgs.get_commandName() == 'Save') {
                         imEditor.saveImageOnServer('', true);
                         imEditor.setToggleState('Save', false);
                         eventArgs.set_cancel(true);
                     }
                 }
     
                 function OnClientSaved(imgEditor, args) {
                     $get("<%=lblMessage.ClientID %>").innerHTML = args.get_argument();
                     callbackFunction();
                }

    protected void RadImageEditor1_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
              {
     
     
                  if (Session["UserName"] != null)
                  {
                      try
                      {
                          BLL.BLL b = new BLL.BLL();
                          //Save the image to a custom location
                          string fileName = Session["UserName"].ToString() + "." + b.GetConfig("~/Web.config", "ImageExtension");
                          string folder = b.GetConfig("~/Web.config", "ServerPath");
                          string fullPath = Path.Combine(folder, fileName);
     
     
                          Telerik.Web.UI.ImageEditor.EditableImage img = args.Image;
     
                
                          img.Image.Save(folder + "\\" + fileName);
                           
                          args.Argument = String.Format("Image saved");
                          args.Cancel = true;
                      
                          Context.Cache.Remove(Session.SessionID + "UploadedFile");
                          Context.Cache.Insert(Session.SessionID + "UploadedFile", img, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);
                          
                          img = null;
                         
                        
     
                          b = null;
                       
     
     
                      }
                      catch (Exception ex)
                      {
                          args.Argument = String.Format("Error occured: " + ex.Message);
                          args.Cancel = true;
                      }
                   
                  }


    UPDATE: Removing CanvasMode="No" fix the issue in IE11, FF,Chrome,Opera,Safari but not IE8 (which 90% of my users are using), and creates another one. any idea to make it work in IE8?

    UPDATE 2:  Decided to give 2013.3 1114  a try and still the same problem



    TIA
  24. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 17 Dec 2013 Link to this post

    Hi Martin,

    The Canvas mode of RadImageEditor is supported only in IE9+, this is why changing the value of the CanvasMode property does not apply any changes to the behavior of the control in IE8.

    It seems that when the canvas mode is disabled and the operations are mode server-side, the control need a little more time to apply the changes before saving the image. The following timeout fixed the issue on my side:
    function OnClientCommandExecuting(imEditor, eventArgs) {
        if (eventArgs.get_commandName() == 'Save') {
            setTimeout(function () {
                imEditor.saveImageOnServer('', true);
                imEditor.setToggleState('Save', false);
                eventArgs.set_cancel(true);
            }, 200);
        }
    }

    Note that you might need to increase the timeout value a little depending on the edited images size.

    Regards,
    Veselina Raykova
    Telerik
    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 the blog feed now.
  25. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 17 Dec 2013 Link to this post

    Veselina,

    Unfortunately here, adding the timeout (ive tried 200 , 1000 and 3000 ms) doesnt change anything in IE8 (changes never get saved). Also, now the Save dialog now appears (I dont want to) and RadImageEditor1_ImageSaving() server method often never get called... depending of the image size. BTW im doing my test with this image which is 408KB and 1600px x 900px

    TIA



  26. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 21 Dec 2013 Link to this post

    Hello Martin,

    I am afraid that I cannot provide you any other workaround for the moment. WE investigate the issue further and it turned out to be connected with the integration between the ImageEditor and AsyncUpload controls. We have logged it into our feedback portal so you can track its progress here: A large uploaded image is not saved properly after cropping in disabled CanvasMode

    As a small token of gratitude I have also updated your Telerik points.

    Regards,
    Veselina Raykova
    Telerik
    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 the blog feed now.
  27. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 21 Dec 2013 Link to this post

    Thanks Veselina,

    the workaround im using at the moment is reloading completely my page after the image upload. Seems like that fixes the issue. Can you try that on your side and let me know if it's better. Probably this might help troubleshooting the problem.

    TIA

    Martin
  28. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Dec 2013 Link to this post

    Hello Martin,

    Thank you for sharing the possible workaround with the Telerik community.

    It would be highly appreciated if you could provide more details about it in the feedback portal item provided by Veselina.

    I will inform the developer team about this, so that they could investigate it further. Unfortunately due to tasks with higher priority I am unable to provide a firm information if this approach is working fine. I suggest testing it further with different scenarios to check if it behaves as expected.

    Regards,
    Ianko
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017