This is a migrated thread and some comments may be shown as answers.

Can't save the edited image

28 Answers 625 Views

ImageEditor

This is a migrated thread and some comments may be shown as answers.

28 Answers, 1 is accepted

Accepted

answered on 19 Oct 2012, 08:10 AM

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.

answered on 25 Oct 2012, 07:49 AM

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;

}

answered on 30 Oct 2012, 08:25 AM

ImageManager-ExternalDialogs.zip

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

answered on 06 Nov 2012, 02:01 PM

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

answered on 03 Apr 2013, 02:57 PM

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.

answered on 05 Apr 2013, 03:12 PM

ImageEditor.zip

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

answered on 10 Apr 2013, 02:54 PM

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

answered on 12 Apr 2013, 04:09 PM

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

answered on 15 Apr 2013, 03:24 PM

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

answered on 24 Jul 2013, 04:13 PM

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

answered on 12 Dec 2013, 01:27 PM

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

answered on 17 Dec 2013, 01:19 PM

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

answered on 21 Dec 2013, 12:30 PM

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

answered on 24 Dec 2013, 10:52 AM

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

answered on 28 Aug 2020, 04:41 PM

I was experiencing this same issue. When using the server side ImageSaving event, it randomly would not fire when saving some images. I tried setting CanvasMode="No" as I found in other posts and I also tried increasing the MaxJsonLength. It did not resolve it. I then tried to implement my own save button to see if that would work. So I implemented the button and used the javascript from other examples I found to send the request to the server. This is nice because it makes the unneeded dialog go away.
ie = $find("<%=MyImageEditor.ClientID %>");
ie.saveImageOnServer("tempfile", true); // file, overwrite
This also did not work. It would fail saying "cannot deserialize empty string".
I also tried making my own server side button click event and inside that tried to get the image.
Dim foo As EditableImage = MyImageEditor.GetEditableImage()
This code would run server side but when I tried to GetEditableImage(), it failed saying "Illegal characters in path."
I was getting very frustrated, but I finally got it to work. Previous posts had said to set CanvasMode="No". I changed this from No to Automatic. Suddenly everything worked as it should. The random ImageSaving "event not firing" issue went away and also using my own server side code, I could now getEditableImage(), etc. I hope this helps someone because I spent HOURS. For me it was the combination of setting CanvasMode="Automatic" and increasing the MaxJsonLength.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Can't save the edited image

28 Answers, 1 is accepted