Node-canvas antialiasing image not working

I am trying to create an animation file using node.js and node-canvas , fetching frame by frame. Part of the animation involves scaling and moving images. My problem is that no anti-aliasing happens, although according to node-canvas and cario (graphics library behind canvas) anti-change should be done by default. Also, according to node-canvas, anti-aliasing can be controlled with this systex ctx.antialias = 'gray';

but doesn't seem to do anything or. If there is any details I can provide that might help, please let me know. Is there a way, using node-canvas or even cairo directly, to add anti-aliasing to image transformations?

PS I am using a method ctx.drawImage

to draw images and I have already tried using patternQuality = 'best';

without success.

+3


source to share


1 answer


When scaling templates, cairo uses bilinear interpolation by default, which should look reasonable. However, when zoomed out, cairo currently (as of 1.12.14) does not have antialiasing patterns properly. There is no way to get this, let alone add a function to the cairo itself, although see below for a potential workaround.

The "antialias" parameter in cairo controls the anti-aliasing of rasterized shapes and text, not templates. The parameter that controls anti-aliasing for patterns is called "cairo_pattern_set_filter" and has the following values:

CAIRO_FILTER_FAST,             // usually the same as NEAREST
CAIRO_FILTER_GOOD,             // usually the same as BILINEAR
CAIRO_FILTER_BEST,             // usually the same as BILINEAR
CAIRO_FILTER_NEAREST,          // for upscaling, this is pixel-replication
CAIRO_FILTER_BILINEAR,         // for upscaling, this is linear interpolation
CAIRO_FILTER_GAUSSIAN          // not implemented, should not be used

      



But, as mentioned, none of them work well for zoom out.

A workaround that some people have used is to scale the image down in steps of 2. That is, scale down the image to half the size in both dimensions until it is about the size you want. This thumbnail image can then be used with an altered transform that downscales less than 2.

+6


source







All Articles