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

Image resize quality JPG

7 Answers 239 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 08 Apr 2019, 08:11 AM

Hi,

I experience rather low quality results on scaling hires JPG image (2900x2900) to a size of 400x400

I can find that InterpolationMode.HighQualityBicubic is used but from my point of view the result should be better then.

Where can I send source photo (3.3MB), just try to scale to 400x400 and you 'll see what I mean.

Something changed in the scale procedure?

Marc

7 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 11 Apr 2019, 07:15 AM
Hi Marc,

We have not made any changes in the ImageEditor scaling algorithm and it still uses Bicubic Interpolation which is the best interpolation mode for the moment. The source code looks like follows:
public virtual Image Resize(Image original, Size size)
{
    return this.Resize(original, size, InterpolationMode.HighQualityBicubic);
}

As a possible option in case you want to use another image scaling algorithm, you could implement a CustomGraphicsCore which inherits IGraphicsCore and apply the desired interpolation in it.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 11 Apr 2019, 11:23 AM

Hi Vessy,

 

I made a test environment which produces picture1 with:

graphics__1.CompositingQuality = CompositingQuality.HighSpeed
graphics__1.InterpolationMode = InterpolationMode.HighQualityBicubic
graphics__1.CompositingMode = CompositingMode.SourceCopy

Please compare the quality with the output of the ImageEditor, picture 2.

I wonder what is causing the bad quality of picture 2 compared to picture 1.

I could send you the source picture if you want so you can test yourself.

Please let me know.

 

Marc

 

0
Vessy
Telerik team
answered on 16 Apr 2019, 09:00 AM
Hi Marc,

The graphics settings used internally in RadImageEditor's Resize() method are as follows, which should not bring such a difference in the final result as even the ComposingQuality is set for higher quality, but not high speed:
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;

Can you send me the source picture as well a sample with the logic you use for producing the shown result, so we can examine them further at our end?

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 17 Apr 2019, 08:54 AM

Hi Vessy,

 

Are you sure that these settings are also used for the ImageEditor Integration in RadEditor?

That is where I experience the issue like so:

<telerik:radeditor ImageManager-ViewPaths="~/userfiles/image" ImageManager-UploadPaths="~/userfiles/image" RenderMode="Lightweight" runat="server" ID="text" />

Can I send the source file by WT? It is too big for the upload...
Please let me know.

Marc

 

0
Vessy
Telerik team
answered on 22 Apr 2019, 02:39 PM
Hi Marc,

Thanks a lot for the clarification. The GDI+ library is the core of the non-canvas mode of RadImageEditor, while by default the Canvas mode is enabled - both in RadImageEditor and the RadEditor's ImageManager:
https://docs.telerik.com/devtools/aspnet-ajax/controls/imageeditor/getting-started/full-set-of-tools

In order to disable the CanvasMode in the ImageEditor nested inside RadEditor and use the server-side editing mode of the control, you should go through the following steps:
  • Enable the external dialogs of RadEditor like explained here:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/dialogs/externaldialogspath-property
  • Navigate to the copied ImageEditor.ascx dialog file and disable the CanvasMode of the control:
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Height="450" EnableResize="false" 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>
     
Please, go through the steps above and let me know if the quality of the image resized after this change will be better. As for the size of the attached project - you can decrease it by removing the Telerik dlls from it, just let me know the used version so I can add them back on my side.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 23 Apr 2019, 09:55 AM

Hi Vessy,

Disabling the CanvasMode does the trick indeed.

So my next question would be: Why is that enabled by default?

 

:-)

 

Marc

0
Vessy
Telerik team
answered on 23 Apr 2019, 12:22 PM
Hi Marc,

The Canvas mode of RadImageEditor is preferred by the most of the clients as it comes with richer functionality (in terms of drawing) and does not make requests to the server for every change, making the editing a bit faster. Still, the sever side implementation of the tools has its advantages, like a higher quality of the resized image :)

I am glad that changing the image mode is bringing the target result at your end. I stay at your disposal in case you need further assistance on this matter.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ImageEditor
Asked by
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Vessy
Telerik team
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or