Tracedata
TheRealTR opened this issue · comments
*What is the structure of the Tracedata object?
Found it- JSON.stringify the object. Now here is my problem: I have a 200x200 image with a white background and a black triangle in the middle. Here's the tracedata:
{"layers":[[{"segments":[{"type":"L","x1":0,"y1":0,"x2":200,"y2":0},{"type":"L","x1":200,"y1":0,"x2":200,"y2":200},{"type":"L","x1":200,"y1":200,"x2":0,"y2":200},{"type":"L","x1":0,"y1":200,"x2":0,"y2":0}],"boundingbox":[0,0,200,200],"holechildren":[],"isholepath":false}],[]],"palette":[{"r":0,"g":0,"b":0,"a":0},{"r":255,"g":255,"b":255,"a":255}],"width":200,"height":200}
There are 2 palettes ('black' & 'white'), but only one layer that describes a 200x200 square and no holes. What am I doing wrong?
Hi,
Here's a pseudocode example:
// tracedata structure, width and height is the same as the ImageData's dimensions
var tracedata = {
layers : SEE BELOW,
palette : SEE BELOW,
width : imgd.width,
height : imgd.height
};
// tracedata.layers is an array of layers, where each layer belongs to a palette color (same index)
// a layer is an array of paths, where each path corresponds to an SVG path or to a hole on another path, more details later
tracedata.layers = [
[path, path, ...],
[path, path, ...],
...
];
// path structure
// See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule : evenodd for more info on cutting holes on SVG shapes
path = {
segments : [ segment, segment, ... SEE BELOW ],
boundingbox : [ topleft_x, topleft_y, bottomright_x, bottomright_y ],
holechildren : [], // array of the holes' indexes. Each "hole child path" will be "cut out" from this shape.
isholepath : boolean // is this path a hole?
}
// segment in path: L_inear or Q_uadratic spline
segment = { type:'L', x1:..., y1:..., x2:..., y2:... }
OR
segment = { type:'Q', x1:..., y1:..., x2:..., y2:..., x3:..., y3:... }
// tracedata.palette is an array of RGBA color objects
tracedata.palette = [
{ r:255, g:0, b:0, a:255 },
{ r:0, g:255, b:1, a:255 }
...
];I recommend this example as well, it shows how you can loop through tracedata layers/paths:
https://github.com/jankovicsandras/imagetracerjs/blob/master/simplify_interop.html
Can you upload your input image? What options / which option preset do you use?
Thanks for the reply!
Here’s where the action is:
var id = ImageTracer.getImgdata(renderer.extract.canvas(me.sprite));
var p = ImageTracer.imagedataToTracedata(id, {colorsampling:0, numberofcolors:2});
I did JSON.stringify(p) to examine the result, which I posted.
Here’s what I’m feeding in:

… On Mar 2, 2023, at 10:12 AM, András Jankovics ***@***.***> wrote:
Hi,
Here's a pseudocode example:
// tracedata structure, width and height is the same as the ImageData's dimensions
var tracedata = {
layers : SEE BELOW,
palette : SEE BELOW,
width : imgd.width,
height : imgd.height
};
// tracedata.layers is an array of layers, where each layer belongs to a palette color (same index)
// a layer is an array of paths, where each path corresponds to an SVG path or to a hole on another path, more details later
tracedata.layers = [
[path, path, ...],
[path, path, ...],
...
];
// path structure
// See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule : evenodd for more info on cutting holes on SVG shapes
path = {
segments : [ segment, segment, ... SEE BELOW ],
boundingbox : [ topleft_x, topleft_y, bottomright_x, bottomright_y ],
holechildren : [], // array of the holes' indexes. Each "hole child path" will be "cut out" from this shape.
isholepath : boolean // is this path a hole?
}
// segment in path: L_inear or Q_uadratic spline
segment = { type:'L', x1:..., y1:..., x2:..., y2:... }
OR
segment = { type:'Q', x1:..., y1:..., x2:..., y2:..., x3:..., y3:... }
// tracedata.palette is an array of RGBA color objects
tracedata.palette = [
{ r:255, g:0, b:0, a:255 },
{ r:0, g:255, b:1, a:255 }
...
];
I recommend this example as well, it shows how you can loop through tracedata layers/paths:
https://github.com/jankovicsandras/imagetracerjs/blob/master/simplify_interop.html
Can you upload your input image? What options / which option preset do you use?
—
Reply to this email directly, view it on GitHub <#64 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXVARKFFLEQBRHEC2LFR3PTW2D5LTANCNFSM6AAAAAAVGIEJVQ>.
You are receiving this because you authored the thread.
That 'renderer.extract.canvas(me.sprite)' thing is a call to PIXI.js
… On Mar 2, 2023, at 10:54 AM, ***@***.*** wrote:
Thanks for the reply!
Here’s where the action is:
var id = ImageTracer.getImgdata(renderer.extract.canvas(me.sprite));
var p = ImageTracer.imagedataToTracedata(id, {colorsampling:0, numberofcolors:2});
I did JSON.stringify(p) to examine the result, which I posted.
Here’s what I’m feeding in:
<Screenshot 2023-03-02 at 10.53.23 AM.png>
> On Mar 2, 2023, at 10:12 AM, András Jankovics ***@***.***> wrote:
>
>
> Hi,
>
> Here's a pseudocode example:
>
> // tracedata structure, width and height is the same as the ImageData's dimensions
> var tracedata = {
> layers : SEE BELOW,
> palette : SEE BELOW,
> width : imgd.width,
> height : imgd.height
> };
>
>
> // tracedata.layers is an array of layers, where each layer belongs to a palette color (same index)
> // a layer is an array of paths, where each path corresponds to an SVG path or to a hole on another path, more details later
> tracedata.layers = [
> [path, path, ...],
> [path, path, ...],
> ...
> ];
>
>
> // path structure
> // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule : evenodd for more info on cutting holes on SVG shapes
> path = {
> segments : [ segment, segment, ... SEE BELOW ],
> boundingbox : [ topleft_x, topleft_y, bottomright_x, bottomright_y ],
> holechildren : [], // array of the holes' indexes. Each "hole child path" will be "cut out" from this shape.
> isholepath : boolean // is this path a hole?
> }
>
>
> // segment in path: L_inear or Q_uadratic spline
> segment = { type:'L', x1:..., y1:..., x2:..., y2:... }
> OR
> segment = { type:'Q', x1:..., y1:..., x2:..., y2:..., x3:..., y3:... }
>
>
> // tracedata.palette is an array of RGBA color objects
> tracedata.palette = [
> { r:255, g:0, b:0, a:255 },
> { r:0, g:255, b:1, a:255 }
> ...
> ];
> I recommend this example as well, it shows how you can loop through tracedata layers/paths:
>
> https://github.com/jankovicsandras/imagetracerjs/blob/master/simplify_interop.html
>
> Can you upload your input image? What options / which option preset do you use?
>
> —
> Reply to this email directly, view it on GitHub <#64 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXVARKFFLEQBRHEC2LFR3PTW2D5LTANCNFSM6AAAAAAVGIEJVQ>.
> You are receiving this because you authored the thread.
>
I can't download your input image, I see only an [OBJ] icon. Please upload your input image again.

… On Mar 4, 2023, at 9:55 AM, András Jankovics ***@***.***> wrote:
I can't download your input image, I see only an [OBJ] icon. Please upload your input image again.
—
Reply to this email directly, view it on GitHub <#64 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXVARKH7HARWJE4M6DKJGMDW2OM2TANCNFSM6AAAAAAVGIEJVQ>.
You are receiving this because you authored the thread.
If it fails again I’ll create a Dropbox link.
… On Mar 4, 2023, at 9:55 AM, András Jankovics ***@***.***> wrote:
I can't download your input image, I see only an [OBJ] icon. Please upload your input image again.
—
Reply to this email directly, view it on GitHub <#64 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXVARKH7HARWJE4M6DKJGMDW2OM2TANCNFSM6AAAAAAVGIEJVQ>.
You are receiving this because you authored the thread.
I still see only an [OBJ] icon. Maybe this helps: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/attaching-files
Please note that I won't download things from external sites (including Dropbox), but you can send me email; you can find my address under Contact on my website.
I tested your triangle with nodecli:
node nodecli t.png -numberofcolors 2 -ltres 10
and the result seems OK to me. (Please note I used the somewhat extreme linear treshold ltres 10 to smoothen the jagged edges; and added newlines to the SVG manually.)
<svg width="396" height="396" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.6" >
<path fill="rgb(236,236,236)" stroke="rgb(236,236,236)" stroke-width="1" opacity="1" d="M 0 0 L 396 0 L 396 396 L 0 396 L 0 0 Z M 196 4 L 26 298 L 27 302 L 370 302 L 218 34 L 200 4 L 196 4 Z " />
<path fill="rgb(1,1,1)" stroke="rgb(1,1,1)" stroke-width="1" opacity="1" d="M 196 4 L 200 4 L 218 34 L 370 302 L 26.5 302 L 26 298 L 196 4 Z " />
</svg>
I hope this helped. You can reopen the issue if you have more questions.