{"id":41252764,"url":"https://github.com/happo/lcs-image-diff","last_synced_at":"2026-01-23T01:43:08.544Z","repository":{"id":36136396,"uuid":"189047210","full_name":"happo/lcs-image-diff","owner":"happo","description":"A JavaScript library to diff two images. Uses the LCS algorithm to allow content to shift.","archived":false,"fork":false,"pushed_at":"2025-04-15T18:34:17.000Z","size":3107,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-01T15:58:10.606Z","etag":null,"topics":["diff","happo","lcs","lcs-algorithm"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/happo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-28T14:42:55.000Z","updated_at":"2025-04-29T13:39:39.000Z","dependencies_parsed_at":"2024-06-18T13:49:27.175Z","dependency_job_id":"6cd3d304-f010-4ab7-a94d-a9bdd5460e16","html_url":"https://github.com/happo/lcs-image-diff","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/happo/lcs-image-diff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happo%2Flcs-image-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happo%2Flcs-image-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happo%2Flcs-image-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happo%2Flcs-image-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/happo","download_url":"https://codeload.github.com/happo/lcs-image-diff/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happo%2Flcs-image-diff/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28677711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T01:00:35.747Z","status":"ssl_error","status_checked_at":"2026-01-23T01:00:19.529Z","response_time":144,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["diff","happo","lcs","lcs-algorithm"],"created_at":"2026-01-23T01:43:08.020Z","updated_at":"2026-01-23T01:43:08.537Z","avatar_url":"https://github.com/happo.png","language":"JavaScript","readme":"# lcs-image-diff\n\nA javascript function that takes two images and returns a new image\nhighlighting the differences between the two images. Uses the\n[Longest-Common-Subsequence algorithm\n(LCS)](https://en.wikipedia.org/wiki/Longest_common_subsequence_problem) to\nalign the two images (vertically). This will prevent unnecessarily big diffs\nfor images where content has shifted up or down. Works in the browser and in\nNode.\n\n## Examples\nImage 1 | Image 2 | Image diff | Traced\n------- | ------- | ---------- | ---------\n![Image 1](https://happo.io/img/happo-io/0ce6187c17100958ad2aa43ce794ede9) | ![Image 2](https://happo.io/img/happo-io/831d05205dd6a094ae8cc5136824b77c) | ![Image diff](https://happo.io/accounts/8/diff/%2Fimg%2Fhappo-io%2F0ce6187c17100958ad2aa43ce794ede9/%2Fimg%2Fhappo-io%2F831d05205dd6a094ae8cc5136824b77c) | ![Diff with trace](trace-example-card.png)\n![Image 1](https://happo.io/img/happo-io/ec485da33ce443baa327783cc7643431) | ![Image 2](https://happo.io/img/happo-io/3c65f11313f8ba196e4da06f39e50692) | ![Image diff](https://happo.io/accounts/8/diff/%2Fimg%2Fhappo-io%2Fec485da33ce443baa327783cc7643431/%2Fimg%2Fhappo-io%2F3c65f11313f8ba196e4da06f39e50692) | ![Diff with trace](trace-example-button.png)\n\n\n## Installation\n\n```bash\nnpm install lcs-image-diff\n```\n\n## Usage in the browser\n\n_Pro tip:_ You're best off using this module in a web worker, to offload heavy\nimage manipulation from the main thread.\n\n```js\nconst imageDiff = require('lcs-image-diff');\n\n// `image1` and `image2` are instances of `ImageData`\n// https://developer.mozilla.org/en-US/docs/Web/API/ImageData\n// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData\nconst { data, width, height, diff } = imageDiff(image1, image2);\n\n// `data` is a `UInt8ClampedArray`\n// `width` and `height` is the resulting size of the diff image\n// `diff` is a number between 0 and 1 describing how much the two images differ.\n```\n\n## Usage in Node\n\nUsage is mostly the same as in the browser, you just have to pass in a custom\n`hashFunction`. Here's an example using images loaded with\n[Jimp](https://github.com/oliver-moran/jimp) and a hash function using the\n[`crypto`](https://nodejs.org/api/crypto.html) module.\n\n```js\nconst crypto = require('crypto');\nconst Jimp = require('jimp');\n\nconst imageDiff = require('lcs-image-diff');\n\nfunction createHash(data) {\n  return crypto\n    .createHash('md5')\n    .update(data)\n    .digest('hex');\n}\n\nconst image1 = (await Jimp.read('1.jpg')).bitmap;\nconst image2 = (await Jimp.read('2.jpg')).bitmap;\n\nconst { data, width, height, diff } = imageDiff(image1, image2, {\n  hashFunction: createHash,\n});\n```\n\n## Getting a diff trace\n\nWhen presenting an image diff to a user, it can be helpful to highlight diff\nareas. The diff image returned by the `imageDiff` function will do some of\nthat, but in some cases when only a few pixels have changed it can be useful to\nfurther trace the diff. For that purpose, `imageDiff` will return a `trace`\nobject that can be used to generate an SVG image with paths tracing the diff.\n\n```js\nconst imageDiff = require('lcs-image-diff');\n\nconst { data, width, height, trace } = imageDiff(image1, image2);\nconst svg = trace.toSVG();\n\ndocument.getElementById('#trace-svg').innerHTML = svg;\n```\n\nThe SVG image is slightly larger than the diff image so that it can properly\nhighlight edges and corners. For that reason, you need to place the SVG in a\ncontainer that bleeds out a little to account for the extra size.\n\n```html\n\u003cdiv id=\"trace-svg\" style=\"margin: 0 -10px\"\u003e\u003c/div\u003e\n```\n\n...or if you hate magic numbers, use the constant attached to the `imageDiff` function:\n\n```js\ndocument.getElementById('#trace-svg').style.margin = `0 ${\n  imageDiff.DIFF_TRACE_PADDING\n}px`;\n```\n\n## Authors\n\n- Henric Trotzig ([@trotzig](https://github.com/trotzig))\n- Joe Lencioni ([@lencioni](https://github.com/lencioni))\n\n---------------------\n\nMake sure to check out [happo.io](https://happo.io) - the cross-browser\nscreenshot testing tool\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappo%2Flcs-image-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhappo%2Flcs-image-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappo%2Flcs-image-diff/lists"}