@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.

Additional Details

• Last updated: Thu, 23 Apr 2020 17:50:36 GMT
• Dependencies: @types/node
• Global values: none

Credits

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