[HTML5] Bad rescaling - no resampling


#1

Hi,
I am trying to bypass a problem with Bitmap rescaling without success.

What I am trying to do is drawing gfx to a BitmapData, applying scaling by a Matrix with properties scaleX and scaleY properly set: I want to take a smaller screenshot of the stage.
What I obtain is this

rescaling

This happens if I use both canvas and WebGL. I tried to enable smoothing in the BitmapData, in the final Bitmap… but the result is always terrible, as if the resampling phase was missing or wrong.

Am I doing something wrong?


#2

Sometimes this looks smoother when done in software, but it also depends on how big of a size ratio there is between the original and the target size. It might be necessary to bitmapData.draw then perform some kind of image resize algorithm. I think canvas (in most browsers) just uses a simple quadratic resize (I think its called), not bicubic or something more advanced like Photoshop


#3

But in the past I didn’t have this problem, it looks like it has been introduced at some point, but I couldn’t tell when exactly.

Couldn’t it be related to the missing antialiasing? Could it be browser-related? Maybe the resampling process has been disabled… could it be a Chrome problem? I should try Firefox, Chrome 69 had problems with 3D that were fixed in version 70, I was going to open a new topic when I found out it: maybe this will be fixed in the future, if it is browser-related.


#4

When your initial image size is a few times larger than needed, iterative scaling can help (HTML5 scale bitmap smoothing antialiasing), but for me it only works in Firefox.


#5

I think it would be very heavy for RAM and CPU…


#6

Running the various applications I made I noticed that this problem is now extended to all BitmapData that use a matrix for rescaling, and the results are all terrible :tired_face:


#7

I have found out, that iterative scaling, suggested here HTML5 scale bitmap smoothing antialiasing, helps in Firefox.
In other browsers my scaled images still look bad. So I’m in search for a solution too.


#8

Is it a regression caused by the browsers or by Lime?


#9

singmajesty says, that they don’t have a special algorithm for rescaling, so it must be caused by browsers.
This pure JS library does good rescaling.
Test: http://output.jsbin.com/palota/1/


#10

EDIT: So we are f… waiting until browsers will be fixed… ?