The library has provided support for several important features related to image comparisons such as comparing images with ignoring caret, comparing images with ignoring antialiasing, getting diff bounds, getting diff clusters, building diff image, building diff image as a buffer, comparing colors and many more.
At A Glance
An overview of LooksSame features.
- Compare PNG images
- Check image dimensions
- Anti-aliasing detection
- Ignoring Caret
LooksSame supports popular Image file formats listed below.
LooksSame can be used in multiple environments like Node or browsers etc.
Getting Started with LooksSame
The recommended way to install LooksSameis via NPM. Please use the following command to install it.
Install LooksSame via NPM
npm install looks-same
The LooksSame library gives software programmers the capability to programmatically compare their PNG images using Node.js. You need to provide the correct path to the PNG images or buffer as a parameter. One simple example of image comparison can be to take a screenshot of the DOM element with the image and use the library to compare it with the local image. You can also use RequestLogger to log a request for the image and compare the response body with the local file using the Buffer.compare() method.
Compare PNG Images by Ignoring Antialiasing
Every image is made up of pixels and while comparing these images you compare every pixel’s color in the image one with the pixel color in the corresponding location of2nd image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The anti-aliasing technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with anti-aliasing issue by ignoring certain of the pixels where anti-aliasing is likely to have occurred. These differences will be ignored by default.
Images Comparison by Ignoring Caret
The free LooksSame library has provided functionality for ignoring caret on input boxes while comparing two images inside their own applications. Text caret in the text input element is a pain for visual regression tasks because it is always blinking. Sometimes when comparing two text boxes or input boxes images, because of the image give caret the comparison is failing for pixel difference. So you can ignore the caret option to disable ignoring such diffs.