Ignore White / monotone svg
skaggetse opened this issue · comments
Thanks for this great script. I have a question though:
When tracing pixelimages to vector in Adobe Illustrator, there's an option to "Ignore white".
This means there will be no white box around an object.
I'm trying to achieve the same output with this script, but the palette-options seems to only change the input image before the tracing part, so it does not output correctly.
This is my image:
This is my options:
options = { colorsampling:false, colorquantcycles:1,
pal:[
{r:0,g:0,b:0,a:255},
{r:255,g:255,b:255,a:255}
]
};
This is the result:
Now, if I change the white color in my palette to transparent( {r:255,g:255,b:255,a:0}), this happens:
This is what I was expecting to get:
Is it possible to get my expected output?
Hi,
Yes, it's possible, you just need to change the palette after tracing, but before rendering. imageToTracedata is probably the easiest way to do this. Here's an example with some boilerplate HTML:
<html>
<body onload="onload_init()">
<script>
function onload_init(){
var options = { colorsampling:false, colorquantcycles:1,
pal:[
{r:0,g:0,b:0,a:255},
{r:255,g:255,b:255,a:255}
]
};
ImageTracer.imageToTracedata(
'cat.jpg',
function(tracedata){
// loop on palette, set white-like colors transparent
for(var i=0; i<tracedata.palette.length; i++){
var whiteness = tracedata.palette[i].r+tracedata.palette[i].g+tracedata.palette[i].b;
var whitetreshold = 600; // r>=200 g>=200 b>=200 will be considered white
if(whiteness>=whitetreshold){
// tracedata.layers[i] can be removed with array.splice()
// but we will render it with transparency for simplicity
tracedata.palette[i].r = 0;
tracedata.palette[i].g = 0;
tracedata.palette[i].b = 0;
tracedata.palette[i].a = 0;
}
}// End of loop on palette
// render and append SVG string to body
ImageTracer.appendSVGString(
ImageTracer.getsvgstring( tracedata, options )
);
},// End of imageToTracedata callback()
options
);// End of ImageTracer.imageToTracedata()
}// End of onload_init()
</script>
<script src="imagetracer_v1.2.5.js"></script>
</body>
</html>I hope this answers your question, you can reopen this issue if you need more help. :)