Image Comparison Tolerance System

Build a flexible image comparison system that can compare images with varying levels of sensitivity depending on the comparison context.

Requirements

Create a module that provides three preset comparison modes for validating images:

1. Strict Mode: Detect even the smallest pixel differences. This mode should be used for pixel-perfect validation where any difference matters.

2. Standard Mode: Tolerate minor rendering variations that might occur across different browsers or environments. This is the default mode for typical screenshot testing.

3. Relaxed Mode: Only flag major differences while ignoring minor color variations. This mode should be used when comparing images that may have slight compression artifacts or minor styling differences.

The system should compare two images and return the number of differing pixels for each mode.

Implementation Details

• Accept image data as buffers in RGBA format (4 bytes per pixel)
• All images being compared will have the same dimensions
• Return the mismatch count for each of the three comparison modes
• Do not generate visual diff output (focus on getting the counts)

Test Cases

• Given two identical 10x10 images, all three modes return 0 mismatches @test
• Given two images where one pixel differs slightly (RGB: [100,100,100] vs [102,102,102]), strict mode detects the difference while relaxed mode does not @test
• Given two 5x5 images with a major color difference in the center pixel (RGB: [255,0,0] vs [0,0,255]), all three modes detect the difference @test

@generates

/**
 * Compares two images with strict sensitivity (detects smallest differences)
 * @param {Buffer|Uint8Array} img1 - First image buffer (RGBA format)
 * @param {Buffer|Uint8Array} img2 - Second image buffer (RGBA format)
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @returns {number} Number of mismatched pixels
 */
function compareStrict(img1, img2, width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Compares two images with standard sensitivity (tolerates minor variations)
 * @param {Buffer|Uint8Array} img1 - First image buffer (RGBA format)
 * @param {Buffer|Uint8Array} img2 - Second image buffer (RGBA format)
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @returns {number} Number of mismatched pixels
 */
function compareStandard(img1, img2, width, height) {
  // IMPLEMENTATION HERE
}

/**
 * Compares two images with relaxed sensitivity (only flags major differences)
 * @param {Buffer|Uint8Array} img1 - First image buffer (RGBA format)
 * @param {Buffer|Uint8Array} img2 - Second image buffer (RGBA format)
 * @param {number} width - Image width in pixels
 * @param {number} height - Image height in pixels
 * @returns {number} Number of mismatched pixels
 */
function compareRelaxed(img1, img2, width, height) {
  // IMPLEMENTATION HERE
}

module.exports = {
  compareStrict,
  compareStandard,
  compareRelaxed,
};

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison capabilities.