Truly a forward looking application. Feature request: Alpha layer.
FutureFireplace opened this issue · comments
Hello.
I admire you approach towards helping the graphic sector within Frontend Development.
Wonder if the next great step for your 'ImageTracerJS', could be to implement a 'Pick layer as Alpha' for the user?
The use of PNG's with alpha layers is highly valued (for me at least), and having an image that can be used as - for instance - a texture of sorts, that brings new levels of professional options -> while seeking solutions that renders with a High End vector-based touch :-)
I hope you will consider my Feature request, with a positive mindset.
//br Thomas Due, Denmark
Hi Thomas,
If you think about operations on polygons, like alpha-masking, that would be a bit too complex and not really in the scope to include in this project.
If you want to change a color (the background) to transparency, you can change the color palette after tracing, before rendering.
You can get a tracedata object from ImageTracer.imageToTracedata or ImageTracer.imagedataToTracedata, manipulate the palette, for example:
tracedata.palette[1] = { r:0, g:0, b:0, a:0 };then render with svgstr = ImageTracer.getsvgstring( tracedata, options );
So it's rather easy to set colors to transparency in the output. But what about the input? It would be possible to select pixels that are similar to a specific color and set them transparent. But I think tracing these would have the same result as changing palette after tracing.
Please reply whether these answer your question or not! :)
Full example:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<script src="imagetracer_v1.2.6.js"></script>
<script>
function onload_init(){
ImageTracer.imageToTracedata(
'panda.png', // input filename
function(tracedata){ // callback function to process tracing result
// normal rendering tracedata -> svgstr with Posterized2 options preset
var svgstr = ImageTracer.getsvgstring( tracedata, 'Posterized2' );
ImageTracer.appendSVGString( svgstr );
// we can change the palette after tracing, like setting this color to transparent
tracedata.palette[1] = { r:0, g:0, b:0, a:0 };
// the rendering is the same
var svgstr2 = ImageTracer.getsvgstring( tracedata, 'Posterized2' );
ImageTracer.appendSVGString( svgstr2 );
},
'Posterized2' // options preset
);// End of ImageTracer.imageToTracedata()
}// End of onload_init()
</script>
</head>
<body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
<div id="svgcontainer"></div>
<div id="canvascontainer"></div>
</body></html>I hope these helped. Feel free to reopen the Issue if you have more questions!
Yes, forgot to answer ... my silence was a passive 'ok I can use this'
thanks