Large Image

[Martin Roussel]

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

[Vessy]

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

[Martin Roussel]

Hi Veselina,

Can you please try to replicate the issue by uploading first the image to the server like in this demo . Maybe setting the ImageURL at declaration might change things. Also, are you using Q3 2012 or the latest version?

 It seems in my case ive been able to trigger the ImageSaving was by using CanvasMode="No"

Also, the issue link status you provided is marked as "Declined". Is it really still under investigation?

TIA

[Martin Roussel]

UPDATE: Using CanvasMode="No" seems to help alot but create an issue im reporting at the bottom of this post

UPDATE 2:  Decided to give 2013.3 1114  and problem with the second picture (nature) seems fixed. Still same problem with the large one.

[Vessy]

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