smarter color reducer?

[chrisyelf]

Hi Andras,

Would it be possible to have a smarter color reducer?
Converting the attached png

to svg with strokewidth 0 scale 1 numberofcolors 8

results in ~4 colors visually (I'm sure pixels are slightly different):
white, yellow, brown, red

The blue in crown was converted to brown. Instead, black outlines could be converted to brown (closer visually).
Actually, if the colors are close visually, I'd prefer to have just one instead of two separate black and dark brown (the one with most pixels).

What do you think?

[chrisyelf]

Also, there is some red in wings, instead of only black.

[András Jankovics]

Hi,

Yes, I see your problem and agree with you that the color quantization is very basic in imagetracerjs.

I tried these with better results, but still not great:

node nodecli s.png colorsampling 0 numberofcolors 8

node nodecli s.png colorsampling 0 numberofcolors 27

You can experiment with the color quantization options, but for best results, you can try to get a palette from another color quantization library (See below), and use that in imagetracerjs:

// colorquantcycles should be 0, because we have the palette already
var options = { colorquantcycles:0, strokewidth:0, numberofcolors:8 }; // Any option can be omitted which will be set to the default

// Adding custom palette. This will override numberofcolors. TODO: get the actual palette from another tool
options.pal = [{r:0,g:0,b:0,a:255}, {r:0,g:0,b:255,a:255}, {r:255,g:255,b:0,a:255}];

// Using these options and appending the SVG to an element with id="svgcontainer"
ImageTracer.imageToSVG(
	'panda.png', /* input filename / URL */
	
	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); }, /* callback function on SVG string result */
	
	options /* custom options object */
);

There are many color quantization algorithms and libraries, I recommend searching GitHub or the web for "javascript color quantization" or similar. Here are some suggestions, but I haven't tried these.

https://github.com/leeoniya/RgbQuant.js

https://github.com/miguelemosreverte/imagetracerjava <- Octree based color quantization, could be backported

[chrisyelf]

Thank you, Andras!