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
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.
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.
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
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.
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/