Pixel data -> Image

[lordminor]

Hi, I'm writing a tool with this parser , and I trying to draw each layer of the psd file into webgl. The big issue come with rasterized images because you need to get the base64 code for each image. So, bigger images = bigger bigger base64!!.

I saw that the parser also give us the pixelData from layer... how we can use that info to render an image in more efficient way? I've tried a lot with canvas, webgl, png converters, etc. without result.

i.e : a 1200x3000px psd file I can render it without rasterized images in 2/3 segs. ..with images it takes almost 13 segs with the memory and processor upon the sky!

maybe someone already dealt with this and can help me.

Thanks a lot!

Regards,

[fabulousduck]

Hey @lordminor. Thank you for your question.

As far as i can tell from reading the source code is that the pixelData is used for the toPng() function. for this we use the pngjs package. This package allows us to parse it as an RGBA pixel buffer.

I unfortunately don't remember how we handle rasterized images as my knowledge on that part is a bit rusty. Could you please provide a sample PSD file that you are trying to parse ? With that i could run some tests and make a better answer for you.

Regards, Duck.

[lordminor]

Montreal Creative Portfolio Theme.zip Hi @fabulousduck , thanks for the quick reply! :) I'm attaching the psd, but is the same with any psd file with a rasterized image inside it. for example 2000x2000 psd with a full white background....the time to render increment when you have more layers inside it due to the base64 large code and the logic to build the image with pixelData.

Thanks again!

[fabulousduck]

Hey again @lordminor.

After some testing different methods of using segments i found that the fastest method of generating the images is to simply use the pngjs node module with compression setting to 4.

This is due to the fact that we cannot stitch the buffers together. we need the images for that.

i would however recommend you use a dedicated node module for compressing images as that would make it slightly faster due to the smaller size of the buffer.

I hope this helps you out.

If i get some more time i will look into some compression libs so i can reccommend the best one.

Regards, duck

[lordminor]

thanks @fabulousduck !

Do you have any mre information to do that? ...I need to use the data from: "psd.image.file.data" ...? that's an Uint8Array....I'm trying to use an image compressor passing that data to a buffer, but it doesnt work.

I need the faster way to parse the psd image. The psd that I've attached in the previous post took at least 10 segs to show the image....Is a quite slow. If you can give me an example how to parse the image with pngjs or any node compressor it would be great :)

Thanks again!

[HaiNV266]

Hi @fabulousduck , After using toPng() function, I got a Image tag HTML in browser. But, I want to convert to svg element in HTML. Is there any way to convert this ?

And, Is there any way to convert buffer image data file to canvas or something to draw on browser ? I will be happy if someone have code sample for these.

Thanks a lots, Regards,