x-img-diff-js

x-img-diff-js

JavaScript(Web Assembly) porting project for Quramy/x-img-diff, which extracts structual information of a bit different 2 images.

Demonstration

See https://reg-viz.github.io/x-img-diff-js/

Usage

Node.js

You need Node.js >= v8.0.0

npm install x-img-diff-js pngjs

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

const detectDiff = require('x-img-diff-js');

function decodePng(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, buffer) => {
      if (err) return reject(err);
      resolve(PNG.sync.read(buffer));
    });
  });
}

async function main() {
  const [img1, img2] = await Promise.all([
    decodePng('demo/img/actual.png')),
    decodePng('demo/img/expected.png')),
  ]);
  const diffResult = await detectDiff(img1, img2);
  console.log("diff result:", diffResult);
  console.log("the number of matching area:", diffResult.matches.length);
  console.log("img1's macthing area bounding rect:", diffResult.matches[0][0].bounding);
  console.log("img2's matching area bounding rect:", diffResult.matches[0][1].bounding);
  console.log("diff marker rectangulars in img1's matching area", diffResult.matches[0][0].diffMarkers.length);
}

main();

Browser

See demo derectory in this repository.

API

function detectDiff

detectDiff(img1: Image, img2: Image, opt?: DetectDiffOptions): Promise<DetectDiffResult>

• img1, img2 - Required - Input images.
• opt - Optional - An object to configure detection.

type Image

type Image = {
  width: number;
  height: number;
  data: Uint8Array;
}

type DetectDiffOptions

A option object. See https://github.com/Quramy/x-img-diff#usage .

type DetectDiffResult

type DetectDiffResult = {
  matces: MatchingRegions[];
  strayingRects: Rect[][];
}

• matces - An array of each matching region.
• strayingRects - An array of keypoints recatangle. strayingRects[0] corresponds to img1, strayingRects[1] does to img2.

type MatchingRegions

type MatchingRegions = {
  bounding: Rect;
  center: Rect;
  diffMarkers: Rect[];
}[];

• bounding - Bounding rectangle of this region.
• center - Center rectangle of this region.
• diffMarkers - An array of different parts.

A MatchingRegions is a couple of objects. The 1st corresponds to img1, and 2nd does to img2. And you can get how far the region moved using center property.

// m is an item of DetectDiffResult#mathes
const translationVector = {
  x: m[1].center.x - m[0].center.x,
  y: m[1].center.y - m[0].center.y,
};

type Rect

type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
}

Represents a rectangle.

function detectDiff.getBrowserJsPath

detectDiff.getBrowserJsPath(): string 

Returns the absolute path of the JavaScript file which should be loaded in Browser env.

function detectDiff.getBrowserWasmPath

detectDiff.getBrowserWasmPath(): string 

Returns the absolute path of the Web Assembly(.wasm) file which should be loaded in Browser env.

How to build module

• Clone this repo and change the current directory to it.

• Get OpenCV source code

git clone https://github.com/opencv/opencv.git
cd opencv
git checkout 3.1.0
cd ..

• Get x-img-diff source code

git clone https://github.com/quramy/x-img-diff.git

• Execute docker

$ docker-compose build
$ docker-compose run emcc

Run module in your local machine

python -mhttp.server
open http://localhost:8000/index.html

License

MIT.