scaled images are badly degraded

[bevil]

Hi all.

I am taking an image in a blob and scaling it down to a size which is reasonable to show on a form, and another to print. the form image is 400x400 pixels, and the print form one is 600x600.

I am finding that the scaling process severely damages the quality of the image on a particular image with many repeating vertical and horizontal lines (doesn't seem to happen with images where there is non linear graphical content.)

I have scaled images many times in servoy and not seen this, and wonder if there is anything I can do to maintain the quality of the image while being downsized.

Attached a screenshot showing the original file alongside the scaled down version.

Any help would be appreciated.

[mboegem]

Hi Bevil,

I've seen bad quality scaling before, also on non-linear graphical content.
My problem was getting from a hi-res image to thumbnails.

I read a lot about it, and tried to find a way other than using the image plugin (as I was blaming that for the poor quality)
In the end I found out every converter I used had the same problem.
The way to get around this, is to half-size it multiple times until you reach the point that you can't half-size it anymore and you can resize to your target dimensions.

so let's take an image of 3264 × 2448 pixels > resize to 150 x 150 px

3264 × 2448
1632 x 1224
816 x 612
408 x 306
204 x 153
150 x 113 (which matches the max dimensions of 150 x 150)

I hope this makes sense and will solve your problem as well.

[bevil]

Hey Marc

Thank you for that.. I did see something along those lines today (I found a post talking about the three options on scaling in java, none of which are good (either very slow / cpu intensive, or produce a poor result)).

My problem with multiple scales is twofold. First, It is already pretty slow to resize once.. To resize four or five times per image is going to be painful. Second problem is that I don't know the originating size of the images. They could be any pixel dimension. I guess there is a way to read the pixel dimensions and calculate a 50% size off that, and then once it gets down to a certain range, put it in your media field and scale down? I don't know... How did you do it? Were all your originating images the same size?



Bevil

[ptalbot]

I did a plugin for that specific issue for someone, it is using a similar technique to workaround the smearing issue when rescaling, ended up never releasing it.
If you are interested, shoot me a PM.

[mboegem]

I guess there is a way to read the pixel dimensions and calculate a 50% size off that, and then once it gets down to a certain range, put it in your media field and scale down? I don't know...

Smart guy like you should have figured that out...

But this is roughly how I solved it, hope it'll be helpful to you:

Code: Select all

/**
* @param {plugins.file.JSFile} _jsFile
* @param {Number} _nHeight
* @param {Number} _nWidth
*/
function createThumbnail(_jsFile, _nHeight, _nWidth) {
   var _jsImage = plugins.images.getImage(_jsFile);
   
   while(_jsImage.getWidth() >= (2*_nWidth) && _jsImage.getHeight() >= (2*_nHeight)) {
      _jsImage = _jsImage.resize(_jsImage.getWidth()/2, _jsImage.getHeight()/2);
   }
   
   
   if (_jsImage.getWidth() > _nWidth || _jsImage.getHeight() > _nHeight) {
      _jsImage = _jsImage.resize(_nWidth, _nHeight);
   }

     return _jsImage;
}