To ensure the color distance is correctly compared to the comparison threshold.

The text fixture could be an image with gray background rgb(0.5, 0.5, 0.5) and an image that contains gray tones with different color offsets (e.g. with rgb(0.6, 0.6, 0.6), which should return a color difference of 0.1).

Hello,

First I'd like to thank you for this nice library.

Then I'd like to report a strange behavior: pixelmatch test.png test2.png output.png 0 true and pixelmatch test2.png test.png output.png 0 true don't provide the same result. In my test case, test.png is the base image (greyscale) and test2.png is the same image with some white painting upon it. This painting isn't detected during the second test whereas it is during the first one.

Is it the expected behavior when working with greyscale pictures or a bug in the library?

Proposing to add "ignoreRectagles" feature as in node-resemble-js, where options would support an ignoreRectangles property which is as in resemble:

//array of rectangles, each rectangle is defined as (x, y, width, height)
//e.g. [[325, 170, 100, 40]]

Pixels within these rectangles would not be tested. Unsure of best way to represent these in diff image.

Hi 👋

I’ve been doing a little research for a conference talk on how npm package size relates to their content, and your package was one in the several ones that were flagged by my scripts. It has an outstanding weekly download count on npm and relatively large content that is not related directly to the package functionality.

I've added some files and folders to an .npmignore file, so they won't get packaged next time you release it on npm.

Thanks, and have a great day!

I'm having difficulty getting a usable diff image from this lib, I've provided output from blink-diff as a comparison for the same images.

Baseline:

Comparison:

pixelmatch diff image:

blink-diff diff image:

The pngjs2 project has been merged (back?) into pngjs. Consequently, pngjs2 is now deprecated and pngjs is the latest version. Confused? I was too.

Consequently, PixelMatch is currently giving the following warning when being installed:

npm WARN deprecated [email protected]: pngjs2 has now taken over the original pngjs package on npm. Please change to use pngjs dependency, version 2+.

This pull request will update to the latest library and cure this warning. No API changes are needed on your part.

And thanks for the very hot library, which I have included here: https://github.com/oliver-moran/jimp

So im trying to compare these images but its not getting the correct one.

async function compareHashTest(type, image, sku) {
  try {
    const path1 = path.resolve(__dirname, `../images/sku/${type}${sku}`);
    const path2 = path.resolve(__dirname, `../images/temp/${type}${image}`);
    const pngPath1 = path.resolve(
      __dirname,
      `../images/sku/${type}${sku.split(".jpg")[0]}.png`
    );
    const pngPath2 = path.resolve(
      __dirname,
      `../images/temp/${type}${image.split(".jpg")[0]}.png`
    );

    let image1 = await sharp(path1).toFile(pngPath1);

    const img1 = PNG.sync.read(fs.readFileSync(pngPath1));

    const { width, height } = img1;

    let image2 = await sharp(path2).resize({ width, height }).toFile(pngPath2);

    const img2 = PNG.sync.read(fs.readFileSync(pngPath2));

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

    let num = pixelmatch(img1.data, img2.data, diff.data, width, height, {
      threshold: 0.5,
    });
    console.log("num", num);
    diff = null;
    return num;
  } catch (e) {
    console.log("error", e);
    return 1;
  }
}

How im comparing and these are the images getting lowest number

Find Match Image : https://images.accessgrantedonline.com/Cardid_DHG_1_220693.jpg - image using to match

Test Images: https://c1.scryfall.com/file/scryfall-cards/normal/front/e/9/e95756ee-e76b-44e9-a13f-6125ee097ce7.jpg?1580561471 https://c1.scryfall.com/file/scryfall-cards/normal/front/7/d/7d24b200-5cab-406a-a0e6-71a4d33b26fb.jpg?1592765261 https://c1.scryfall.com/file/scryfall-cards/normal/front/5/3/53d2260a-e001-4d03-a108-759591e4d233.jpg?1543676327

Image matched was https://c1.scryfall.com/file/scryfall-cards/normal/front/5/3/53d2260a-e001-4d03-a108-759591e4d233.jpg?1543676327

Expected Match https://c1.scryfall.com/file/scryfall-cards/normal/front/e/9/e95756ee-e76b-44e9-a13f-6125ee097ce7.jpg?1580561471

Hello, here is the code I tested:

import { promises as fs } from 'fs';
import pixelmatch from 'pixelmatch';
import sizeOf from 'buffer-image-size';

const img1 = './public/images/20190605133954-1-atoms.Tables.ATOM-038 - TableCell.png';
const img2 = './public/images/20190605133954-1-atoms.Tables.ATOM-037 - TableHead.png';

const promise1 = fs.readFile(img1);
const promise2 = fs.readFile(img2);

Promise.all([ promise1, promise2 ])
  .then(([ buffer1, buffer2 ]) => {
    const { width: width1, height: height1 } = sizeOf(buffer1);
    const { width: width2, height: height2 } = sizeOf(buffer2);
    if (width1 === width2 && height1 === height2) {
      const diff = pixelmatch(buffer1, buffer2, null, width1, height1, { threshold: 0 });
    }
  })
  .catch(error => console.error(error));

And I got the following error:

Error: Image sizes do not match.
    at pixelmatch (/home/tocab/Projects/Smile/diplopia/diplopia-api/node_modules/pixelmatch/index.js:19:15)
    at file:///home/tocab/Projects/Smile/diplopia/diplopia-api/test.mjs:17:20

I used node v12.4.0 with the --experimental-modules flag.

In your lib you are testing img1.length !== img2.length and this is false when using Buffers although the images have the same dimensions (800x600).

Here are the two images I used for my test:

Implements the formula in this paper, which is much closer to CIEDE2000 in quality unlike YUV distance which was non-uniform.

Also fixes RGBA to RGB conversion to blend with white rather than black.

• [x] update tests
• [ ] try to optimize some more
• [x] cleanup and code comments
• [x] update readme

cc @hastebrot

I must be doing something errant. (Javascript Browser method)

import pixelmatch from "pixelmatch"

export default async function TextFromImage(imageElement, frameData, lastImage) {
  
  const scaleFactor = 4
  
  //create an offscreen canvas and crop the image
  var crop = document.createElement('canvas');
  crop.width = frameData.width * scaleFactor
  crop.height = frameData.height * scaleFactor
  var crop_x = crop.getContext('2d');
  
  const imageProcessing = crop_x.getImageData(0, 0, crop.width, crop.height);
  
  const origImg = imageProcessing
  console.log("origImg: ", imageProcessing)
  
  PreProcessFunctions(imageProcessing.data, frameData.name, destWidth, destHeight, grey, blur, dilate, invert, thresh, replace, threshLevel, rLevelMIN, rLevelMAX, gLevelMIN, gLevelMAX, bLevelMIN, bLevelMAX)
  
  const newImg = imageProcessing
  console.log("newImg: ", imageProcessing)
  
  const numDiffPixels = pixelmatch(origImg, newImg, {threshold: 0.1});
}

Console.log:

ImageData { width: 393, height: 120, data: Uint8ClampedArray(188640) }
​data: Uint8ClampedArray(188640) [ 255, 255, 255, … ]
​height: 120
​width: 393
​<prototype>: ImageDataPrototype { width: Getter, height: Getter, data: Getter, … }

ImageData { width: 393, height: 120, data: Uint8ClampedArray(188640) }
​data: Uint8ClampedArray(188640) [ 255, 255, 255, … ]
​height: 120
​width: 393
​<prototype>: ImageDataPrototype { width: Getter, height: Getter, data: Getter, … }

Error: Uncaught (in promise) Error: Image data: Uint8Array, Uint8ClampedArray or Buffer expected.

The images are the same size. I also tried added in diff using:

const diff = new Image()
const numDiffPixels = pixelmatch(origImg, newImg, diff, 393, 120, {threshold: 0.1});

Eventually I would like to use lastImage, but for now this function basically compares the original image before tesseract pre-processing to a new image after pre-processing. The images (orig and new) should be very different from each other but will still be the same size.

It looks like the latest version of pixelmatch was published 2 years ago https://www.npmjs.com/package/pixelmatch

However, there are some changes made to this repo 8 months ago.

Could someone with the correct permission publish these changes to npm?

Perhaps @mourner. Thanks!

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 :)

this fixes the issue w false positives and also a bug for returning true when false should have been returned. In addition, I added conditional handling for the "edge" cases where you variably can accept one or two zeros depending on the line they are on.

Hi,

I use pixelmatch to compare the whole bunch of screenshots i've been taking for each version of my product (approx 300 screenshots) I use the binary to test each new screenshots against the previous one. But even if there is no differences (or if the diff threshold ins't reach), I still have a diff file generated which make the tester job quite difficult since he has to go through 300 files, even if there is no différence at all.

Can't you prevent the diff file to be writen if the threshold is not reached ?

Hi @mourner ,

I can only imagine what your life is like right now in the midst of invasion! This is certainly not urgent, but I just wanted to document here...

I wanted to pose a question and propose a possible solution to the issue where Chrome and other browsers are often inconsistent in their anti-aliased font rendering like below output from latest pixelmatch:

A human can see "New Client" is shifted a few pixels up and over between the two screenshots, and might consider it within the threshold of "close enough - PASS". Anti-aliasing parameters don't seem to get it to filter out the false positive. So I forked your repo and made this pull request: https://github.com/mapbox/pixelmatch/pull/106

Proposed addition of two parameters to popular pixelmatch library:

• horizontalShiftPixels
• verticalShiftPixels

Setting these parameters > 0 makes pixelmatch do additional checking for neighboring pixels within plus-or-minus horizontal/vertical "shift pixels" to avoid false-positives when the browser misaligns text by a few pixes.

• Only execute this more expensive operation if the original pixel position mis-matches

Useful for jest-puppeteer testing screenshot matching where Chrome/Firefox text rendering is slightly shifted even on the same machine like this difference with original pixelmatch: