Issues tracing mostly transparent images

[Henric Trotzig]

Hi! First of all, thanks for sharing such a great library.

I'm trying to use your library when tracing image diffs. Given two bitmaps, I want to create outlines where the two bitmaps diff. The approach I'm taking here involves first creating an "overlay" bitmap where all pixel differences between the two input images are painted. I then take that image and feed it through imagedataToSVG to get an svg where areas are highlighted. In most cases this works just fine, but for some bitmaps I don't get the tracing to work.

This image for instance:

If I feed that image through imagedataToSVG, this is what I get:

<svg width="800" height="378" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.3" ><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0" d="M 0 0 L 800 0 L 800 378 L 0 378 L 0 0 Z " /></svg>

I've played around with the different options but I can't find anything that would trace that pattern.

Here are two images where tracing does work:

Here's a tricky one (where tracing doesn't work), where the only pixels are in the right side corners:

I would be very thankful for some help here!

[András Jankovics]

Hi,

I see your problem. Here's a workaround which might help to get some results on the first and the forth images, but it's still not optimal:

options = {"numberofcolors":2,"colorsampling":0,"pathomit":0,"strokewidth":0,"qtres":0,"ltres":0,"roundcoords":-1} ;

There were 3 difficulties:

1. The default colorsampling = 2 gets the initial palette from a rectangular grid. If you have very few pixels with a certain color and the numberofcolors is also few, then it might happen that no pixels of this color will be sampled. In your case: all the colors of the palette were sampled as transparency. This can be solved by turning off color sampling: options.colorsampling = 0 ; ; and defining an initial palette is also recommended.

2. The default strokewidth = 1 might hide small transparent holes. Solution: set options.strokewidth = 0 ; to avoid overlapping.

3. The default roundcoords = 1 rounds the coordinates to 1 decimal place e.g. 567.8 . I recommend setting options.roundcoords = -1 ; (turning off rounding) and setting low (or zero) qtres and ltres for better precision.

Even after these, I see that the shapes and the coordinates are a bit off. I'll check whether this is normal or there's a bug.

You can also try to upscale the source images by 10 (without filtering), and trace with options.scale = 0.1 ; , it might help getting better results.

[Henric Trotzig]

Awesome, thanks! I'll try out some of these in a minute.

[Henric Trotzig]

Looks like it's working -- thanks a lot for your help!

While creating the diff overlay image, I let the diff pixels bleed a little. With this approach, I can use strokewidth as well. Here's what the end result for the first image looks like:

Here's the end result for a tricky one where only a few pixels in the right corners have changed:

Here's one with some text changes:

[William Garvey]

Just wanted to say I had a similar problem with an image that is mostly transparent, and this thread really helped. (My image consisted of strictly black and white pixels) and this solved it, {colorsampling: 0, pal: [ {r:0,g:0,b:0,a:255}, {r:0,g:0,b:0,a:255}]}.

This quote was key

If you have very few pixels with a certain color and the numberofcolors is also few, then it might happen that no pixels of this color will be sampled.

Thank you.