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

Large Image

4 Answers 153 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Martin Roussel
Top achievements
Rank 1
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

Sort by
0
Vessy
Telerik team
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 12 Dec 2013, 12:24 PM
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
0
Martin Roussel
Top achievements
Rank 1
answered on 13 Dec 2013, 03:01 PM
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.


0
Vessy
Telerik team
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
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.
Tags
ImageEditor
Asked by
Martin Roussel
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Martin Roussel
Top achievements
Rank 1
Share this question
or