Error: Image data: Uint8Array, Uint8ClampedArray or Buffer expected.

[maucherOnline]

What I expect:

I expect the fn pixelmatch to return a diff image.

What I get instead:

Error: Image data: Uint8Array, Uint8ClampedArray or Buffer expected.

Notes:

This is also happening when I use a raw buffer instead of buffer.writeUInt8();

const compareScreenshots = async (pageEntities) => {
    for (let entity of pageEntities) {
        const beforeImageURL = entity.before;
        const afterImageURL = entity.after;

        const beforeImageBuffer = urlToBuffer(beforeImageURL).then(buffer => PNG.sync.read(buffer));
        const afterImageBuffer = urlToBuffer(afterImageURL).then(buffer => PNG.sync.read(buffer));

        const url = new URL(entity.page);
        const slug = url.pathname;
        const comparisonImgFileSlug = slug.replace(new RegExp('/', 'g'), '-');
        const filename = 'comparison-${comparisonImgFileSlug}.png';

        const {width, height} = beforeImageURL;
        const diff = new PNG({width, height});

        const comparison = pixelmatch(
            beforeImageBuffer,
            afterImageBuffer,
            diff.data,
            width,
            height,
            {threshold: 0.1}
        );
        // ...
    }
    // ...
};
const urlToBuffer = async (url) => {
    return Jimp.read(url)
        .then(image => image.getBufferAsync(image.getMIME))
        .then(buffer => buffer.writeUInt8());
};

[mourner]

urlToBuffer(beforeImageURL).then(buffer => PNG.sync.read(buffer)) returns a promise, not a buffer, hence the error on your side.