TWebImageControl.ResizeImage results in poor image quality

WEB TMS WEB Core
1

Hello!
Using latest WebCore, I have the following problem:
When loading png images (drawn images, not photos) in a TWebImageControl and resize them via the ResizeImage(w,h) method, it results in poor quality:

Original:
normal_size

Resized:
resized_image

I tried to improve it by changing the line
var dataURL = canvas.toDataURL("image/png");
to
var dataURL = canvas.toDataURL("image/png", 1.0);
in function GetBase64Image of WEBLib.WebTools.pas, but that didn't help.

Any ideas?

Best regards,
Meik Stoll

2

The resizing is 100% done by the browser, we just set the desired new size and the browser itself performs the resize. Given the result is PNG it is lossless compression, so this can't be causing a worse result. I also see the browser used anti-aliasing for the resize. So, I'm afraid that from TMS WEB Core level, we cannot force it to be better than this.

3

Thanks for the quick answer.

So my solution for showing an image with correct aspect ratio in a fixed size image control is by

  • setting HeightStyle and WidthStyle of the TWebImageControl to "ssAbsolute"
  • introducing a CSS class with attributes
    height: 100%; width: 100%; object-fit: contain;
    and applying this to the TWebImageControl
1 Like