Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
x-img-diff-js
Advanced tools
Readme
JavaScript(Web Assembly) porting project for Quramy/x-img-diff, which extracts structual information of a bit different 2 images.
See https://reg-viz.github.io/x-img-diff-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();
See demo derectory in this repository.
detectDiff
detectDiff(img1: Image, img2: Image, opt?: DetectDiffOptions): Promise<DetectDiffResult>
img1
, img2
- Required - Input images.opt
- Optional - An object to configure detection.Image
type Image = {
width: number;
height: number;
data: Uint8Array;
}
DetectDiffOptions
A option object. See https://github.com/Quramy/x-img-diff#usage .
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
.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,
};
Rect
type Rect = {
x: number;
y: number;
width: number;
height: number;
}
Represents a rectangle.
detectDiff.getBrowserJsPath
detectDiff.getBrowserJsPath(): string
Returns the absolute path of the JavaScript file which should be loaded in Browser env.
detectDiff.getBrowserWasmPath
detectDiff.getBrowserWasmPath(): string
Returns the absolute path of the Web Assembly(.wasm) file which should be loaded in Browser env.
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 ..
git clone https://github.com/quramy/x-img-diff.git
$ docker-compose build
$ docker-compose run emcc
python -mhttp.server
open http://localhost:8000/index.html
MIT.
FAQs
compare 2 images considering into translation
The npm package x-img-diff-js receives a total of 66,818 weekly downloads. As such, x-img-diff-js popularity was classified as popular.
We found that x-img-diff-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.