1. Products
  2.   Image
  3.   Node.js
  4.   LooksSame
 
  

Free Node.js API for Image Comparison

Open Source Node.js-based API that Compare Images Pixel by Pixel. A Powerful, Flexible, and Efficient Solution for Image Comparison in Node.js Applications.

Image comparison plays a vital role in software development, particularly in areas such as visual regression testing, image quality assurance, and pixel-perfect design verification. Whether you are developing software to ensure consistent UI appearance across multiple platforms or automating visual checks in a production pipeline, having an efficient image comparison tool is essential. LooksSame, an open-source API developed by Gemini-Testing, simplifies the process of creating software for image comparison with its intuitive features. There are several important features part of the library such as Pixel-by-Pixel image comparison, anti-aliasing detection, configure tolerance control, handling image dimensions, support for Promises and many more.

LooksSame is a Node.js-based API designed for image comparison. It allows developers to compare images pixel by pixel, with options to handle minor variations that may occur due to differences in rendering environments. By utilizing the library, software developers can build their own applications that detect significant visual differences while ignoring trivial variations. The API is primarily focused on helping developers maintain consistency in UI design, but its versatility makes it suitable for many other image comparison use cases. With its straightforward API and customizable options, LooksSame is a great addition to any developer's toolkit, particularly for web-based UI testing, automated image generation, and other scenarios where visual accuracy is paramount.

Previous Next

Getting Started with LooksSame

The recommend way to install LooksSame is using NPM. Please use the following command for a smooth installation.

Install LooksSame via NPM

npm install looks-same

Basic Image Comparison in Node.js Apps

The open source LooksSame library makes it easy for software developers to perform basic image comparison inside Node.js applications. Once installed, you can compare two images by requiring the LooksSame module in your code. Here's a basic example that shows how to use the library to check if two images are visually identical: In this example, compares image1.png and image2.png. If they are visually the same, equal will return true; otherwise, it returns false.

How to Compare Two Images inside Node.js Apps?

const looksSame = require('looks-same');

// Compare two images
looksSame('image1.png', 'image2.png', (error, { equal }) => {
    if (error) {
        console.error('Error comparing images:', error);
    } else if (equal) {
        console.log('Images are identical!');
    } else {
        console.log('Images differ!');
    }
});

Tolerance-Based Image Comparison

For applications that don’t require pixel-perfect matches, software developers can add a tolerance level. This allows small differences between images, such as changes due to rendering on different browsers or operating systems, to be ignored. In the following code example, the tolerance is set to 5%, meaning that small pixel variations (up to 5%) will not cause the images to be considered different.

How to perform Tolerance-Based Image Comparison inside Node.js Apps?

cfunction compareWithTolerance(image1, image2, toleranceLevel) {
    looksSame(image1, image2, { tolerance: toleranceLevel }, (error, { equal }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else if (equal) {
            console.log('Images are visually identical within tolerance!');
        } else {
            console.log('Images differ!');
        }
    });
}

// Usage
compareWithTolerance('image1.png', 'image2.png', 5);  // 5% tolerance

Highlighting Specific Areas of Difference

For more sophisticated applications, software developers might want to identify and analyze only specific areas of difference. The LooksSame library provides a bounding box feature that shows the exact region where differences occur. This function outputs the bounding box coordinates of the differing regions, making it easier to focus on specific parts of the image that have changed. The following example shows how to use bounding box coordinates to compare images and highlight the differences.

How to Compare Identify the Differences between Specific Areas of Images via Node.js Apps?

function compareWithDiffBounds(image1, image2) {
    looksSame(image1, image2, (error, { diffBounds }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else {
            console.log('Bounding box of differences:', diffBounds);
        }
    });
}

// Usage
compareWithDiffBounds('image1.png', 'image2.png');

Anti-Aliasing Detection for Accurate Comparisons

The open source LooksSame library allows software developers to perform images compression by using Anti-Aliasing Detection method inside Node.js applications. Anti-aliasing can cause false positives when comparing images, as it introduces slight variations in edge rendering. The library’s ignoreAntialiasing option helps avoid these false positives. This is especially useful for applications where images may be rendered differently on various devices or browsers but are still visually the same.

 English