[HTML5] Bad rescaling - no resampling

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


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?

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

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.

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.

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

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:

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.

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

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/

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

I am facing the dame issu. PixiJS scale images fine. But not OpenFL. :frowning:

Does it look different using -Dcanvas?

No, same result for me.

Have you disabled pixelSnapping and enabled smoothing in your bitmap?

(Hint: smoothing resets to false again if you set bitmap.bitmapData again)