Image resize quality JPG

[Fit2Page]

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

[Vessy]

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

[Fit2Page]

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

 

[Vessy]

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

[Fit2Page]

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

 

[Vessy]

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

[Fit2Page]

Hi Vessy,

Disabling the CanvasMode does the trick indeed.

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

 

:-)

 

Marc

[Vessy]

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