Compare different sized images? about pixelmatch HOT 8 OPEN

#!/usr/bin/env node
// filename: pixelmatch-different-size.mjs
'use strict';

import fs from 'fs';
import { PNG } from 'pngjs'; // npm install pngjs ... https://www.npmjs.com/package/pngjs/v/6.0.0
import pixelmatch from 'pixelmatch'; // npm install pixelmatch ... https://www.npmjs.com/package/pixelmatch/v/5.3.0
import sharp from 'sharp'; // npm install sharp ... https://www.npmjs.com/package/sharp/v/0.31.1

const buffer1 = fs.readFileSync('img1.png'); // https://nodejs.org/api/fs.html#fsreadfilesyncpath-options
const sharp1 = sharp(buffer1); // https://sharp.pixelplumbing.com/api-constructor
const sharp1Metadata = await sharp1.metadata(); // https://sharp.pixelplumbing.com/api-input#metadata

const buffer2 = fs.readFileSync('img2.png');
const sharp2 = sharp(buffer2);
const sharp2Metadata = await sharp2.metadata();

// choose maximum width and height among both images, providing a bounding box canvas which can contain either image
const maximumWidth = Math.max(sharp1Metadata.width, sharp2Metadata.width);
const maximumHeight = Math.max(sharp1Metadata.height, sharp2Metadata.height);
    
// derive a new version "boxedBuffer1" of "img1.png", conceptually placing "img1.png" in the upper-left corner of a bounding box canvas
const boxedBuffer1 = await sharp1
  .resize({ // https://sharp.pixelplumbing.com/api-resize#resize
    width: maximumWidth,
    height: maximumHeight,
    fit: 'contain', // instead of cropping or stretching, use "(letter/pillar/window)-boxing" (black space) to fill any excess space
    position: 'left top' // arrange the original image in the upper-left corner
  })
  .raw()
  .toBuffer();

const boxedBuffer2 = await sharp2
  .resize({
    width: maximumWidth,
    height: maximumHeight,
    fit: 'contain',
    position: 'left top'
  })
  .raw()
  .toBuffer();

// boxedBuffer1 and boxedBuffer2 will have the same dimensions

const diff = new PNG({ // create a new PNG for holding the pixelmatch difference
  width: maximumWidth,
  height: maximumHeight
});

const numDiffPixels = pixelmatch(
  boxedBuffer1,
  boxedBuffer2,
  diff.data,
  maximumWidth,
  maximumHeight,
  {threshold: 0.05} // my favorite threshold to also consider lighter grays as differences
);

fs.writeFileSync('diff-boxed.png', PNG.sync.write(diff));
await sharp1.png().toFile('img1-boxed.png');
await sharp2.png().toFile('img2-boxed.png');

var croppedImage = new Uint8Array(4 * smallerHeight * smallerWidth);

for (var y = 0; y < smallerHeight; y++) {
    for (var x = 0; x < smallerWidth; x++) {
        var i = (y * biggerWidth + x) * 4;
        var j = (y * smallerWidth + x) * 4;
        croppedImage[j + 0] = biggerImage[i + 0];
        croppedImage[j + 1] = biggerImage[i + 1];
        croppedImage[j + 2] = biggerImage[i + 2];
        croppedImage[j + 3] = biggerImage[i + 3];
    }    
}

/** Creates a diff of the given input images, which may have different sizes. 
 * @param {PNG} img1
 * @param {PNG} img2
 * @param {pixelmatch.PixelmatchOptions} options
 * @returns {{diff: PNG, numOfDiffPixels: number}}
 */
function createDiff(img1, img2, options) {
	const diffDimensions = {
		width: Math.max(img1.width, img2.width),
		height: Math.max(img1.height, img2.height),
	};

	const resizedImg1 = createResized(img1, diffDimensions);
	const resizedImg2 = createResized(img2, diffDimensions);

	const diff = new PNG(diffDimensions);

	const numOfDiffPixels = pixelmatch(
		resizedImg1.data,
		resizedImg2.data,
		diff.data,
		diffDimensions.width,
		diffDimensions.height,
		options,
	);

	return {diff, numOfDiffPixels};
}

/** Cretes a copy of {@link img}, with the {@link dimensions}.
 * @param {PNG} img 
 * @param {{width: number, height: number}} dimensions 
 * @returns {PNG} 
 */
function createResized(img, dimensions) {
	if(img.width > dimensions.width || img.height > dimensions.height) {
		throw new Error(`New dimensions expected to be greater than or equal to the original dimensions!`);
	}
	const resized = new PNG(dimensions);
	PNG.bitblt(img, resized, 0, 0, img.width, img.height);

	return resized;
}