Parse PNG on 16 bit - Githubissues

aleczratiu commented 4 years ago

It doesn't work on 16 bit png images. I changes the PNG parser with https://github.com/lukeapage/pngjs to parse on 16 bit but the output on svg it seems to be wrong position for pixels

jankovicsandras commented 4 years ago

Hi,

Do you have problems with image loading/decoding with Node.js? Please try to convert your image format to an ImageData-like object. Note: this is an 8-bit array, not a 16-bit array.

ImageData.data Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive). ImageData.height Is an unsigned long representing the actual height, in pixels, of the ImageData. ImageData.width Is an unsigned long representing the actual width, in pixels, of the ImageData.

It's mentioned (but probably not emphasized) in the README, that ImageTracer supports only imagedataToSVG() and imagedataToTracedata() with Node.js, image loading/decoding is not in the scope of this project.

jankovicsandras commented 4 years ago

If you already have a 16-bit ImageData, then you can try to edit imagetracer.js, search and replace 255 with 65535 where it's relevant in and change this cdl value in line 314 to 4*65535. I can't guarantee that this will work, but you can try. :)

https://github.com/jankovicsandras/imagetracerjs/blob/21b1d9bd21a374fe35620ece1058a55307e111e0/imagetracer_v1.2.5.js#L314

aleczratiu commented 4 years ago

Hi @jankovicsandras, thank you for answer. I already use on NodeJS server to parse some png to svg for test https://png-to-svg.herokuapp.com/ where I test the package. If depth is 16 or 32 I try to convert it on 8 bit but I still have some bugs with some png it multiply the content from image by 3 like in bellow example. Original png

After is parsed: Screenshot 2019-12-04 at 17 04 52

And one more thing, the final svg output have some missing fill color I think Original png image: free-vector-rocket-clip-art_116937_Rocket_clip_art_medium

After is parsed some fill are missing: Screenshot 2019-12-04 at 17 08 37

Original png Files which was tested: free-vector-rocket-clip-art_116937_Rocket_clip_art_medium f214b031153b72d903235ce637d57309

jankovicsandras commented 4 years ago

Hi,

I don't know how https://png-to-svg.herokuapp.com/ works and can't troubleshoot it. Please contact them with the palette problem. The following renders the rocket and its palette correctly, so it's not an ImageTracer problem.

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
</head>
<body onload="onload_init()" style="background-color:rgb(64,64,64);color:white;">
    <div id="canvascontainer"></div>
    <script src="imagetracer_v1.2.5.js"></script>
    <script>

        function onload_init(){

            ImageTracer.imageToTracedata(
                'rocket.png',

                function(tracedata){

                    // creating a palette display
                    var palettedisplaystr = '</br>';
                    for(var colidx=0; colidx<tracedata.palette.length; colidx++){
                        var col = tracedata.palette[colidx];
                        palettedisplaystr += '<span style="color:rgba('+col.r+','+col.g+','+col.b+','+col.a+');" >██' + colidx + '██ </span>'+(col.a==0?(colidx+' transparent'):'')+'</br>';
                        console.log(JSON.stringify(col));
                    }

                    // appending the traced image and the palette display
                    ImageTracer.appendSVGString( ImageTracer.getsvgstring(tracedata/*,options*/) + palettedisplaystr );
                }
            );

        }// End of onload_init()

    </script>
</body></html>

Result: rocketresult

The problem with the 3 gray balloons is still an image loading/decoding problem. The problematic balloon image is not an RGBA PNG, but an Indexed Color PNG. You can easily convert it with GIMP Image → Mode → RGB

More info on PNG colors: https://en.wikipedia.org/wiki/Portable_Network_Graphics#Pixel_format

bilde

jankovicsandras / imagetracerjs

Parse PNG on 16 bit #34