Image resize quality JPG

8 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    439 posts
    Member since:
    Feb 2007

    Posted 08 Apr Link to this post

    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

  2. Vessy
    Admin
    Vessy avatar
    2033 posts

    Posted 11 Apr Link to this post

    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.
  3. Fit2Page
    Fit2Page avatar
    439 posts
    Member since:
    Feb 2007

    Posted 11 Apr in reply to Vessy Link to this post

    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

     

  4. Vessy
    Admin
    Vessy avatar
    2033 posts

    Posted 16 Apr Link to this post

    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.
  5. Fit2Page
    Fit2Page avatar
    439 posts
    Member since:
    Feb 2007

    Posted 17 Apr in reply to Vessy Link to this post

    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

     

  6. Vessy
    Admin
    Vessy avatar
    2033 posts

    Posted 22 Apr Link to this post

    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.
  7. Fit2Page
    Fit2Page avatar
    439 posts
    Member since:
    Feb 2007

    Posted 23 Apr in reply to Vessy Link to this post

    Hi Vessy,

    Disabling the CanvasMode does the trick indeed.

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

     

    :-)

     

    Marc

  8. Vessy
    Admin
    Vessy avatar
    2033 posts

    Posted 23 Apr Link to this post

    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.
Back to Top