HTML5 scale bitmap smoothing antialiasing


#1

Hej all,
I’ve a problem. I’ve searched everywhere, tried all the tips and still can’t get my resized image look pretty.
The original image is about 300x300 and I scale it to fit 50x50. I know it’s a big scale but when I scale my picture using CSS (outside openfl, in normal HTMLDom), it gives me a pretty picture like you can see on the screenshot below so it can be possible :
openfl


#2

I’ve tried to do without OpenFL just raw canvas like below, and it gives me a good result (not as good as using simple CSS but better than everything I’ve tested using OpenFL). How can I achieve it using OpenFL please ?

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var width = 50;
      var height = 50;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, width, height);
      };
      imageObj.src = '../media/avatars/natacha.jpg';
    </script>
  </body>
</html>

Sans-titre-13


#3

Can you paste here your OpenFL code?

To have antialiasing enabled for HTML5 target try using <window antialiasing="4" if="html5" />


#4

Thanks for your answer.
In fact, I’ve tried many solutions I’ve found googling. antialiasing=“4”, resizable=“true/false”, -Dcanvas, -Dwebgl, -Dcairo (?) even -Ddom
The code is quite simple, I’ve tried bmp.width = 50, bmp.height = 50, bmp.smoothing=true. I’ve also tried using draw() method using a matrix even drawWithQuality()…


#5

Did you set bitmapData after or before setting smoothing? Because I think setting bitmapData resets smoothing to false.

I’m on the same boat about unable to enable antialiasing when using the draw methods.


#6

Yes I forgot to mention that I do bmp.smoothing = true at the end. I know it’s a weired bug happening even on flash plateform for years.


#7

Could you share a little bit of test code, so we could test it to? Maybe link an image like the one you’re working with? How does it look in OpenFL -Ddom?


#8

Hej Joshua,
Thanks for your answer.
The original picture is this one :
natacha
I know, it’s strange picture and the scale is huge but once again, in CSS it scales nice as you can see upper.
Using -Ddom it gives quite the same ugly result and my whole project doesn’t run as expected too (I think I’ll create another topic for this problem later…)
The code is quite simple : I’ve tried simply setting bmp.width and bmp.height and at the end bmp.smoothing=true; And I’ve also tried scaling using a matrix and bmp.drawWithQuality()


#9

I am currently facing the same issue in our project (also user avatars). Subscribing here :slight_smile:


#10

OpenFL -Ddom

image

OpenFL -Dcanvas

image

OpenFL WebGL

image

Flash

image
image

I’m seeing pretty similar results across the board, though I do have to use <window allow-high-dpi="true" /> on canvas (and bump up the image size) in order to get a similar result as using DOM in OpenFL.

I can see how pure DOM does look better

image

It must be a smarter resize mechanism, or perhaps mipmapping on the GPU. We use bicubic sampling when resizing in native code, but in HTML5 canvas and WebGL, we’re really at the mercy of what the browser is using, even in DOM mode. We use 3D transformations for performance, which the browser must resize differently than a standard CSS style resize.

I think that the pattern of her hair makes this image a particularly bad case for the standard resizing algorithm. Is there a way you can process images in advance on a server, and provide thumbnail size images that have already gone through a more advanced downsample filter, or do it in advance with Photoshop?