jankovicsandras / imagetracerjs

Simple raster image tracer and vectorizer written in JavaScript.
The Unlicense
1.31k stars 171 forks source link

Issue with tracing #40

Closed wunksert closed 4 years ago

wunksert commented 4 years ago

Hi, I'm getting this issue when tracing simple curved and diagonal lines. Do you have any idea what might be causing this? I went and tried the same image with Vector Magic and it traced the curves and diagonals perfectly so it should be doable.

Screen Shot 2020-05-08 at 2 17 30 PM

Thanks!

jankovicsandras commented 4 years ago

Hi,

Can you please upload the original image also and your options object/preset? I think the color quantization splits the gradient to two colors: the light purple spots should be the in the same purple shape. This can be fixed by tweeking the color quantization parameters. ltres = 0.01 and qtres = 1 might also help.

wunksert commented 4 years ago

Hi there,

Changing the qtres and ltres and changing the color palette to only 2 colors helped a bit, but it's still not tracing curved or diagonal paths properly.

Here's the new options object I'm using: var opts = { pathomit:35, //Changing this to 1 makes the P more jagged qtres: 0.5, ltres: 0.1, numberofcolors: 2 }

Here are the 2 input images I'm testing it on: W P

And here is the svg output

Screen Shot 2020-05-10 at 8 33 16 AM Screen Shot 2020-05-10 at 8 28 05 AM
wunksert commented 4 years ago

HI there, have you been able to make any headway on this issue?

jankovicsandras commented 4 years ago

Hi,

I don't see any problem with ImageTracer itself, but I recommend you experimenting with options or doing some preprocessing with another image manipulation program. You can try to remove / flatten the smoothed edges of the letters for example.

I tried these options and got OK results, I'm not sure you can get much better quality from these input images.

W

"sharp"

{"qtres":0.01,"linefilter":true,"rightangleenhance":true,"strokewidth":0}

W

P

"curvy"

{"ltres":0.01,"linefilter":true,"rightangleenhance":true,"strokewidth":0}

{"ltres":0.01,"linefilter":true,"rightangleenhance":true,"strokewidth":0,"numberofcolors":2}

P