1. Products
  2.   Image
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API to Compare PNG Images

Open Source JavaScript Library that supports comparing PNG images inside JavaScript Apps. It supports compare PNG images by Ignoring antialiasing & by ignoring caret. 

Comparing images with images using JavaScript can be quite hard and challenging. Picking the wrong tool can also greatly influence performance. LooksSame is an open source JavaScript library that has included functionality for comparing PNG images inside JavaScript applications and will work out of the box on every machine. The library has been created while taking into account human color perception. The library was mainly created for the needs of visual regression testing for Gemini utility.

This library allows developers to quickly and easily compare the difference between two PNG images with ease using JavaScript commands. It has provided support for processing PNG images either by providing paths to the files or images inside the buffer. Using the default settings will identify only the noticeable difference and if you need to detect any particular differences please select the strict option.

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 images, building diff images as a buffer, comparing colors, and many more.

Previous Next

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

Compare PNG Images inside JavaScript Apps

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 via JavaScript API

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

looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

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 image one with the pixel color in the corresponding location of the 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 issues by ignoring certain of the pixels where anti-aliasing is likely to have occurred. These differences will be ignored by default.

Compare Images by Ignoring Antialiasing & Caret via JavaScript

 const fs = require("fs");
const http = require("http");

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

const noop = () => null;

const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";

const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};

http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");

      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

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.

 English