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 = ;const PNG = PNG; const detectDiff = ; { return { fs; };} { const img1 img2 = await Promiseall ) ); const diffResult = await ; console; console; console; console; console;} ;
Browser
See demo derectory in this repository.
API
detectDiff
function detectDiffimg1: Image, img2: Image, opt?: DetectDiffOptions: Promise<DetectDiffResult>
img1
,img2
- Required - Input images.opt
- Optional - An object to configure detection.
Image
type
DetectDiffOptions
type A option object. See https://github.com/Quramy/x-img-diff#usage .
DetectDiffResult
type
matces
- An array of each matching region.strayingRects
- An array of keypoints recatangle.strayingRects[0]
corresponds toimg1
,strayingRects[1]
does toimg2
.
MatchingRegions
type ;
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;
Rect
type
Represents a rectangle.
detectDiff.getBrowserJsPath
function detectDiff.getBrowserJsPath: string
Returns the absolute path of the JavaScript file which should be loaded in Browser env.
detectDiff.getBrowserWasmPath
function 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.