@types/pixelmatch

What is @types/pixelmatch?

@types/pixelmatch provides TypeScript type definitions for the pixelmatch library, which is used for image comparison and finding differences between images.

What are @types/pixelmatch's main functionalities?

Image Comparison

This feature allows you to compare two images and generate a diff image highlighting the differences. The code sample reads two PNG images, compares them using pixelmatch, and writes the resulting diff image to a file.

const pixelmatch = require('pixelmatch');
const fs = require('fs');
const PNG = require('pngjs').PNG;

const img1 = PNG.sync.read(fs.readFileSync('image1.png'));
const img2 = PNG.sync.read(fs.readFileSync('image2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});

const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

fs.writeFileSync('diff.png', PNG.sync.write(diff));

Custom Threshold

This feature allows you to set a custom threshold for the image comparison. The code sample demonstrates how to set a higher threshold value, which makes the comparison less sensitive to minor differences.

const pixelmatch = require('pixelmatch');
const fs = require('fs');
const PNG = require('pngjs').PNG;

const img1 = PNG.sync.read(fs.readFileSync('image1.png'));
const img2 = PNG.sync.read(fs.readFileSync('image2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});

const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.5});

fs.writeFileSync('diff.png', PNG.sync.write(diff));

Other packages similar to @types/pixelmatch

resemblejs

Resemble.js is a JavaScript library for image comparison. It provides more advanced features like tolerance settings for colors and antialiasing detection. Compared to pixelmatch, Resemble.js offers a more comprehensive set of options for fine-tuning image comparisons.

looks-same

Looks-same is another image comparison library that focuses on pixel-level comparison. It supports ignoring antialiasing and has options for comparing images with different dimensions. Looks-same is similar to pixelmatch but offers additional flexibility in handling image size differences.

README

Installation

npm install --save @types/pixelmatch

Summary

This package contains type definitions for pixelmatch (https://github.com/mapbox/pixelmatch#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/pixelmatch.

index.d.ts

/// <reference types="node" />

declare function Pixelmatch(
    /** Image data of the first image to compare. Note: image dimensions must be equal. */
    img1: Buffer | Uint8Array | Uint8ClampedArray,
    /** Image data of the second image to compare. Note: image dimensions must be equal. */
    img2: Buffer | Uint8Array | Uint8ClampedArray,
    /** Image data to write the diff to, or null if don't need a diff image. */
    output: Buffer | Uint8Array | Uint8ClampedArray | null,
    /** Width of the images. Note that all three images need to have the same dimensions. */
    width: number,
    /** Height of the images. Note that all three images need to have the same dimensions. */
    height: number,
    /** Options. */
    options?: Pixelmatch.PixelmatchOptions,
): number;

declare namespace Pixelmatch {
    type RGBTuple = [number, number, number];

    interface PixelmatchOptions {
        /**
         * Matching threshold, ranges from 0 to 1. Smaller values make the comparison more sensitive.
         * @default 0.1
         */
        readonly threshold?: number | undefined;
        /**
         * If true, disables detecting and ignoring anti-aliased pixels.
         * @default false
         */
        readonly includeAA?: boolean | undefined;
        /**
         * Blending factor of unchanged pixels in the diff output.
         * Ranges from 0 for pure white to 1 for original brightness
         * @default 0.1
         */
        alpha?: number | undefined;
        /**
         * The color of anti-aliased pixels in the diff output.
         * @default [255, 255, 0]
         */
        aaColor?: RGBTuple | undefined;
        /**
         * The color of differing pixels in the diff output.
         * @default [255, 0, 0]
         */
        diffColor?: RGBTuple | undefined;
        /**
         * An alternative color to use for dark on light differences to differentiate between "added" and "removed" parts.
         * If not provided, all differing pixels use the color specified by `diffColor`.
         * @default null
         */
        diffColorAlt?: RGBTuple | undefined;
        /**
         * Draw the diff over a transparent background (a mask), rather than over the original image.
         * Will not draw anti-aliased pixels (if detected)
         * @default false
         */
        diffMask?: boolean | undefined;
    }
}

export = Pixelmatch;

Additional Details

• Last updated: Tue, 07 Nov 2023 09:09:39 GMT
• Dependencies: @types/node

Credits

These definitions were written by Oleg Repin, Piotr Błażejewicz, and Damian Frizzi.