mapbox / pixelmatch

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

Avoid generating diff images with no differences in it #120

Open abbrechen opened 1 year ago

abbrechen commented 1 year ago

Hi,

not sure if this is already a feature and I just didn't find it in the documentation and generated diff object properties after the function analysis, but it would be good to have the information if the software has found differences between the two images. If there are no differences, I would like to avoid saving these images.

Maybe something like

var diffImg = pixelmatch(img1, img2, diff, 800, 600, {threshold: 0.1, GenerateNoDiff: true});
// if "GenerateNoDiff" is set to false and no diff was found, the function returns null. If differences were found, it returns the regular obj
// if "GenerateNoDiff" is set to to true, the function always returns the obj

or maybe as part of the generated obj

var diffImg = pixelmatch(img1, img2, diff, 800, 600, {threshold: 0.1});
// diffImg.diff will be true if differences were found or false, if no differences were found

Thanks :)

kraktus commented 4 weeks ago

Have the same request, for now checking manually if the PNG contains pixels of the difference color

const containsRed = (png) => {
    const {data} = png;
    for (let i = 0; i < data.length; i += 4) {
        if (data[i] === 255 && data[i + 1] === 0 && data[i + 2] === 0) {
            return true;
        }
    }
    return false;

}
const differentScreenshots = (baseline, screenshot) => {
    const img1 = PNG.sync.read(fs.readFileSync(baseline));
    const img2 = PNG.sync.read(fs.readFileSync(screenshot));
    const {width, height} = img1;
    const diff = new PNG({width, height});
    pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

    // check if diff contains pixel of difference, 255;0;0 by default
    const isDifferent = containsRed(diff);
    if (isDifferent) {
        fs.writeFileSync('pics/diff.png', PNG.sync.write(diff));
    }
    return isDifferent
}