Large Image in UI for ASP.NET AJAX

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

Large Image

4 Answers 49 Views

ImageEditor

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

Martin Roussel asked on 09 Dec 2013, 01:15 PM

Hi,

im trying to use a "large" Image in my RadImageEditor (using Q3 2012). The Image is a 8.17MB .jpg and is 7069px x 4907px. I can load it in the editor but cant use any feature after that. Either the browser (Chrome 31) crashes or the control event never gets launched (and code just hangs). What are the image size/high-resolution limitations with the control?

UPDATE: Im now trying with a smaller jpg image which is 408KB and 1600px x 900px. Now I can do some image operation on it like crop, rotate,etc. but the OnImageSaving event never get launched when I want to call my custom save function.

Note that everything works perfectly with this jpg image which is 244KB and 800px x 600px.

here is my code:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" 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);

//Prevent the buil-in Save dialog to pop up

imEditor.setToggleState('Save', false);

eventArgs.set_cancel(true);

}

</script>

</telerik:RadCodeBlock>

protected void RadImageEditor1_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)

{

/...

}

TIA

4 Answers, 1 is accepted

answered on 12 Dec 2013, 09:46 AM

Hi Martin,

We are aware of the first reported issue and it is connected with performance issues in Chrome related to the drawImage method, which is the essential method to edit the raster image. You can find more detailed information on the subject in the following Chrome issues: 117949, 121780.

We are still investigating whether there is a way to workaround this behavior, so you can track the following item for any progress on the issue: ImageEditor crashes in Chrome when too big image is loaded in it

Regarding the second issue, though - I was not able to reproduce it on my side. The ImageSaving event is triggered properly on my side - you can see the video from my test here.

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.

answered on 17 Dec 2013, 11:17 AM

Hello Martin,

I am glad that upgrading RadControls to the latest version has fixed the second issue. Unfortunately, as explained in one of my previous replies, the issue with the large images is connected to a browser bug, which cannot be controlled by us. This is also the reason why the item is marked as declined - because it is not connected directly to the RadControls and cannot be fixed by us.

Kind regards,
Veselina Raykova
Telerik