CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-pixelmatch

The smallest and fastest pixel-level image comparison library with anti-aliasing detection.

Overall
score

97%

Overview
Eval results
Files

task.mdevals/scenario-10/

Visual Diff Report Generator

Build a tool that compares two images and generates multiple diff visualizations with varying levels of context preservation.

Requirements

Your tool should accept two image file paths and produce three different diff outputs, each highlighting changes with different background visibility levels:

  1. High Contrast Mode: Maximum emphasis on differences with minimal background distraction
  2. Balanced Mode: Moderate visibility of unchanged areas while still emphasizing differences
  3. Context Preserved Mode: Full original image context with highlighted differences

Each output should:

  • Use red color to highlight differing pixels
  • Save the result as a PNG file with an appropriate suffix (e.g., diff-high-contrast.png)
  • Display the mismatch count for the comparison

The tool should handle images with transparency correctly and report dimension mismatches appropriately.

Test Cases

  • When comparing two identical images, all three diff outputs should show grayscale versions of the original with zero mismatches @test

  • When comparing images that differ by a few pixels, the high contrast output should show differences on a near-white background, while the context preserved output should maintain full original brightness @test

  • When image dimensions don't match, an error should be reported @test

Implementation

@generates

API

/**
 * Generates multiple diff visualizations between two images
 *
 * @param {string} img1Path - Path to first PNG image
 * @param {string} img2Path - Path to second PNG image
 * @param {string} outputPrefix - Prefix for output filenames
 * @returns {Object} Object containing mismatch count and output paths
 */
function generateDiffReport(img1Path, img2Path, outputPrefix) {
  // IMPLEMENTATION HERE
}

module.exports = { generateDiffReport };

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison with configurable visualization options.

pngjs { .dependency }

Provides PNG encoding and decoding support for reading and writing image files.

Install with Tessl CLI

npx tessl i tessl/npm-pixelmatch

tile.json