mapbox / pixelmatch

The smallest, simplest and fastest JavaScript pixel-level image comparison library
ISC License
6.1k stars 304 forks source link

Following the doc but "Image data: Uint8Array, Uint8ClampedArray or Buffer expected." is still thrown. #135

Closed terryjiang2020 closed 6 months ago

terryjiang2020 commented 6 months ago
const path = require('path');

const rootDir = path.resolve(__dirname);

const image1 = fs.readFileSync(rootDir + '/temp/test1.png');

const image2 = fs.readFileSync(rootDir + '/temp/test2.png');

compareTwoImages(image1, image2);

export const compareTwoImages = (img1, img2) => {

    const image1 = PNG.sync.read(img1);
    const image2 = PNG.sync.read(img2);
    const diff = new PNG({width: 1280, height: 800});

    const rootDir = path.resolve(__dirname);

    pixelmatch(image1.data, image2.data, diff, 1280, 800, {threshold: 0.1});

    fs.writeFileSync(rootDir + '/temp/diff.png', PNG.sync.write(diff));

    // fs.unlinkSync(rootDir + '/temp/output.png');

    return diffImage;
}

This throws the error of "Image data: Uint8Array, Uint8ClampedArray or Buffer expected."

I have also tried to input Buffer, and the input were tested with Buffer.isBuffer and returned true, but the error still persist.

mourner commented 6 months ago

I think you missed diff.data instead of diff when passing it to pixelmatch, can you try it?

terryjiang2020 commented 6 months ago

@mourner Thanks! Adding "data" does solve my problem, sorry for not checking my code correctly.