Using PSD.js, how to output png as buffer?

Question

In a Nodejs project, I am using PSD.js to generate a png from a psd. I am using the .toPng() method. I would like to go from this png object to a buffer without saving to the file system. I have tried Buffer.from(png) and I have tried using Sharp's sharp(png).toBuffer() without luck. Sharp is then used to modify the png buffer.

const psd = new PSD(fileBuffer);
psd.parse();

if (!psd.image) {
    throw 'Error message';
}
const png = psd.image.toPng();
convBuffer = Buffer.from(png); 
             //await sharp(png).toBuffer() failed 
             //await png.get() failed

toPng returns an Image object - can Buffer.from work with that? The sharp constructor can't, as far as I can tell from sharp.pixelplumbing.com/api-constructor/#new — C3roe
– C3roe, Commented Oct 8 at 10:32

Taoufik Kallel · Accepted Answer · 2025-10-08 11:34:55Z

2

const { PNG } = require('pngjs');
const { PSD } = require('psd.js');
const { WritableStreamBuffer } = require('stream-buffers'); // optional, or use a raw Buffer approach
const sharp = require('sharp');

// Assume fileBuffer is already loaded with the PSD data
const psd = new PSD(fileBuffer);
psd.parse();

if (!psd.image) {
    throw new Error('PSD does not contain an image');
}

// Get the PNGJS object
const png = psd.image.toPng();

// Use PNGJS to pack the PNG stream and collect into a buffer
const getPngBuffer = () => {
    return new Promise((resolve, reject) => {
        const chunks = [];
        png.pack()
            .on('data', chunk => chunks.push(chunk))
            .on('end', () => resolve(Buffer.concat(chunks)))
            .on('error', reject);
    });
};

(async () => {
    try {
        const pngBuffer = await getPngBuffer(); // This is your usable PNG buffer

        // Now you can use Sharp with the buffer
        const modifiedImageBuffer = await sharp(pngBuffer)
            .resize(300, 300)
            .toBuffer();

        // Do whatever you need with modifiedImageBuffer...
    } catch (err) {
        console.error('Error processing image:', err);
    }
})();

Here you modify it to adjust to your needs but the idea is there

answered Oct 8 at 11:34

Taoufik Kallel

362 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Michaud Oct 8 at 16:07

@Taofik, thank you! That worked perfectly and PNGJS is already part of Firebase, so I didn't even need to import a new module.

Collectives™ on Stack Overflow

Using PSD.js, how to output png as buffer?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related