{"id":19805353,"url":"https://github.com/reg-viz/x-img-diff-js","last_synced_at":"2025-08-02T04:06:05.042Z","repository":{"id":43002394,"uuid":"110635980","full_name":"reg-viz/x-img-diff-js","owner":"reg-viz","description":":art: JavaScript library which compares 2 images and detect structural difference information using OpenCV(WebAssembly)","archived":false,"fork":false,"pushed_at":"2021-08-04T05:44:42.000Z","size":5088,"stargazers_count":53,"open_issues_count":10,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-07T05:47:38.958Z","etag":null,"topics":["image-processing","javascript","nodejs","opencv","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://reg-viz.github.io/x-img-diff-js/","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reg-viz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-14T03:32:55.000Z","updated_at":"2025-05-15T16:45:45.000Z","dependencies_parsed_at":"2022-09-26T20:31:27.266Z","dependency_job_id":null,"html_url":"https://github.com/reg-viz/x-img-diff-js","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/reg-viz/x-img-diff-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reg-viz%2Fx-img-diff-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reg-viz%2Fx-img-diff-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reg-viz%2Fx-img-diff-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reg-viz%2Fx-img-diff-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reg-viz","download_url":"https://codeload.github.com/reg-viz/x-img-diff-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reg-viz%2Fx-img-diff-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268334036,"owners_count":24233782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-processing","javascript","nodejs","opencv","wasm","webassembly"],"created_at":"2024-11-12T09:03:33.333Z","updated_at":"2025-08-02T04:06:04.993Z","avatar_url":"https://github.com/reg-viz.png","language":"C++","funding_links":[],"categories":["Tutorials"],"sub_categories":["Image similarity"],"readme":"# x-img-diff-js\n[![CircleCI](https://circleci.com/gh/reg-viz/x-img-diff-js.svg?style=svg)](https://circleci.com/gh/reg-viz/x-img-diff-js)\n[![npm version](https://badge.fury.io/js/x-img-diff-js.svg)](https://badge.fury.io/js/x-img-diff-js)\n\nJavaScript(Web Assembly) porting project for [Quramy/x-img-diff](https://github.com/Quramy/x-img-diff), which extracts structual information of a bit different 2 images.\n\n## Demonstration\nSee https://reg-viz.github.io/x-img-diff-js/\n\n## Usage\n### Node.js\n**You need Node.js \u003e= v8.0.0**\n\n```sh\nnpm install x-img-diff-js pngjs\n```\n\n```javascript\nconst fs = require('fs');\nconst PNG = require('pngjs').PNG;\n\nconst detectDiff = require('x-img-diff-js');\n\nfunction decodePng(filename) {\n  return new Promise((resolve, reject) =\u003e {\n    fs.readFile(filename, (err, buffer) =\u003e {\n      if (err) return reject(err);\n      resolve(PNG.sync.read(buffer));\n    });\n  });\n}\n\nasync function main() {\n  const [img1, img2] = await Promise.all([\n    decodePng('demo/img/actual.png')),\n    decodePng('demo/img/expected.png')),\n  ]);\n  const diffResult = await detectDiff(img1, img2);\n  console.log(\"diff result:\", diffResult);\n  console.log(\"the number of matching area:\", diffResult.matches.length);\n  console.log(\"img1's macthing area bounding rect:\", diffResult.matches[0][0].bounding);\n  console.log(\"img2's matching area bounding rect:\", diffResult.matches[0][1].bounding);\n  console.log(\"diff marker rectangulars in img1's matching area\", diffResult.matches[0][0].diffMarkers.length);\n}\n\nmain();\n```\n\n### Browser\nSee [demo directory](https://github.com/reg-viz/x-img-diff-js/tree/master/demo) in this repository.\n\n## API\n\n### function `detectDiff`\n\n```ts\ndetectDiff(img1: Image, img2: Image, opt?: DetectDiffOptions): Promise\u003cDetectDiffResult\u003e\n```\n\n- `img1`, `img2` - *Required* - Input images.\n- `opt` - *Optional* - An object to configure detection.\n\n### type `Image`\n\n```ts\ntype Image = {\n  width: number;\n  height: number;\n  data: Uint8Array;\n}\n```\n\n### type `DetectDiffOptions`\nA option object. See https://github.com/Quramy/x-img-diff#usage .\n\n### type `DetectDiffResult`\n\n```ts\ntype DetectDiffResult = {\n  matces: MatchingRegions[];\n  strayingRects: Rect[][];\n}\n```\n\n- `matces` - An array of each matching region.\n- `strayingRects` - An array of keypoints recatangle. `strayingRects[0]` corresponds to `img1`, `strayingRects[1]` does to `img2`.\n\n### type `MatchingRegions`\n\n```ts\ntype MatchingRegions = {\n  bounding: Rect;\n  center: Rect;\n  diffMarkers: Rect[];\n}[];\n```\n\n- `bounding` - Bounding rectangle of this region.\n- `center` - Center rectangle of this region.\n- `diffMarkers` - An array of different parts.\n\nA `MatchingRegions` is a couple of objects. The 1st corresponds to `img1`, and 2nd does to `img2`.\nAnd you can get how far the region moved using `center` property.\n\n```ts\n// m is an item of DetectDiffResult#mathes\nconst translationVector = {\n  x: m[1].center.x - m[0].center.x,\n  y: m[1].center.y - m[0].center.y,\n};\n```\n\n### type `Rect`\n\n```ts\ntype Rect = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n```\n\nRepresents a rectangle.\n\n### function `detectDiff.getBrowserJsPath`\n\n```ts\ndetectDiff.getBrowserJsPath(): string \n```\n\nReturns the absolute path of the JavaScript file which should be loaded in Browser env.\n\n### function `detectDiff.getBrowserWasmPath`\n\n```ts\ndetectDiff.getBrowserWasmPath(): string \n```\n\nReturns the absolute path of the Web Assembly(.wasm) file which should be loaded in Browser env.\n\n## How to build module\n\n1. Clone this repo and change the current directory to it.\n\n2. Get OpenCV source code\n\n ```\n git clone https://github.com/opencv/opencv.git\n cd opencv\n git checkout 3.1.0\n cd ..\n ```\n\n3. Get x-img-diff source code\n\n ```\n git clone https://github.com/quramy/x-img-diff.git\n ```\n\n4. Execute docker\n\n```sh\n$ docker-compose build\n$ docker-compose run emcc\n```\n\n## Run module in your local machine\n\n```\npython -mhttp.server\nopen http://localhost:8000/index.html\n```\n\n## License\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freg-viz%2Fx-img-diff-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freg-viz%2Fx-img-diff-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freg-viz%2Fx-img-diff-js/lists"}