{"id":13508504,"url":"https://github.com/gemini-testing/looks-same","last_synced_at":"2025-05-15T07:04:12.463Z","repository":{"id":19961738,"uuid":"23228650","full_name":"gemini-testing/looks-same","owner":"gemini-testing","description":"Node.js library for comparing images","archived":false,"fork":false,"pushed_at":"2025-03-17T14:25:21.000Z","size":1081,"stargazers_count":683,"open_issues_count":26,"forks_count":54,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-14T10:42:50.822Z","etag":null,"topics":["image-comparisons","nodejs","testplane"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gemini-testing.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-08-22T14:45:09.000Z","updated_at":"2025-04-10T09:05:46.000Z","dependencies_parsed_at":"2023-02-15T05:16:00.139Z","dependency_job_id":"bec06b72-1ed0-42ac-b44c-39d984917acb","html_url":"https://github.com/gemini-testing/looks-same","commit_stats":{"total_commits":108,"total_committers":23,"mean_commits":4.695652173913044,"dds":0.7592592592592593,"last_synced_commit":"b9399bce8fd980e6e59cf740bee3cd3fe66c3eae"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemini-testing%2Flooks-same","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemini-testing%2Flooks-same/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemini-testing%2Flooks-same/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemini-testing%2Flooks-same/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gemini-testing","download_url":"https://codeload.github.com/gemini-testing/looks-same/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292039,"owners_count":22046426,"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","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-comparisons","nodejs","testplane"],"created_at":"2024-08-01T02:00:54.045Z","updated_at":"2025-05-15T07:04:12.399Z","avatar_url":"https://github.com/gemini-testing.png","language":"JavaScript","readme":"# LooksSame\n\n[![Build Status](https://travis-ci.org/gemini-testing/looks-same.svg?branch=master)](https://travis-ci.org/gemini-testing/looks-same)\n\nNode.js library for comparing images, taking into account human color\nperception. It is created specially for the needs of visual regression testing\nfor [`testplane`](http://github.com/gemini-testing/testplane) utility, but can be used\nfor other purposes.\n\n## Benchmark\n\nBenchmark is presented in the corresponding directory.\n\n- [Benchmark description](./benchmark/README.md)\n- [Benchmark results](./benchmark/results.md)\n\n## Supported image formats\n\nJPEG, PNG, WebP, GIF, AVIF, TIFF and SVG images are supported.\n\n*Note: If you want to compare jpeg files, you may encounter random differences due to the jpeg structure if they are not lossless jpeg files.*\n\n## Comparing images\n\n```javascript\nconst looksSame = require('looks-same');\n\n// equal will be true, if images looks the same\nconst {equal} = await looksSame('image1.png', 'image2.png');\n```\n\nParameters can be paths to files or buffer with compressed image.\n\nBy default, it will detect only noticeable differences. If you wish to detect any difference,\nuse `strict` options:\n\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {strict: true});\n```\n\nYou can also adjust the [ΔE](http://en.wikipedia.org/wiki/Color_difference) value that will be treated as error\nin non-strict mode:\n\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {tolerance: 5});\n```\n\nDefault `tolerance` in non-strict mode is 2.3 which is enough for the most cases.\nSetting `tolerance` to 0 will produce the same result as `strict: true`, but strict mode\nis faster.\nAttempt to set `tolerance` in strict mode will produce an error.\n\nSome devices can have different proportion between physical and logical screen resolutions also\nknown as `pixel ratio`. Default value for this proportion is 1.\nThis param also affects the comparison result, so it can be set manually with `pixelRatio` option.\n\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {pixelRatio: 2});\n```\n\n### Comparing images with ignoring caret\n\nText caret in text input elements it is a pain for visual regression tasks, because it is always blinks. These diffs will be ignored by default. You can use `ignoreCaret` option with `false` value to disable ignoring such diffs. In that way text caret will be marked as diffs.\n\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {ignoreCaret: true});\n```\n\nBoth `strict` and `ignoreCaret` can be set independently of one another.\n\n### Comparing images with ignoring antialiasing\n\nSome images has difference while comparing because of antialiasing. These diffs will be ignored by default. You can use `ignoreAntialiasing` option with `false` value to disable ignoring such diffs. In that way antialiased pixels will be marked as diffs. Read more about [anti-aliasing algorithm](http://www.eejournal.ktu.lt/index.php/elt/article/view/10058/5000).\n\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {ignoreAntialiasing: true});\n```\n\nSometimes the antialiasing algorithm can work incorrectly due to some features of the browser rendering engine. Use the option `antialiasingTolerance` to make the algorithm less strict. With this option you can specify the minimum difference in brightness (zero by default) between the darkest/lightest pixel (which is adjacent to the antialiasing pixel) and theirs adjacent pixels.\n\nWe recommend that you don't increase this value above 10. If you need to increase more than 10 then this is definitely not antialiasing.\n\nExample:\n```javascript\nconst {equal} = await looksSame('image1.png', 'image2.png', {ignoreAntialiasing: true, antialiasingTolerance: 3});\n```\n\n### Getting diff bounds\nLooksame returns information about diff bounds. It returns only first pixel if you passed `stopOnFirstFail` option with `true` value. The whole diff area would be returned if `stopOnFirstFail` option is not passed or it's passed with `false` value.\n\n### Getting diff clusters\nLooksame returns diff bounds divided into clusters if option `shouldCluster` passed with `true` value. Moreover you can pass clusters size using `clustersSize` option.\n\n```javascript\n// {\n//     equal: false,\n//     diffBounds: {left: 10, top: 10, right: 20, bottom: 20}\n//     diffClusters: [\n//         {left: 10, top: 10, right: 14, bottom: 14},\n//         {left: 16, top: 16, right: 20, bottom: 20}\n//     ]\n// }\nconst {equal, diffBounds, diffClusters} = await looksSame('image1.png', 'image2.png', {shouldCluster: true, clustersSize: 10});\n```\n\n## Building diff image\n\n```javascript\nawait looksSame.createDiff({\n    reference: '/path/to/reference/image.png',\n    current: '/path/to/current/image.png',\n    diff: '/path/to/save/diff/to.png',\n    highlightColor: '#ff00ff', // color to highlight the differences\n    strict: false, // strict comparsion\n    tolerance: 2.5,\n    antialiasingTolerance: 0,\n    ignoreAntialiasing: true, // ignore antialising by default\n    ignoreCaret: true // ignore caret by default\n});\n```\n\n## Building diff image as a Buffer\n\nIf you don't want the diff image to be written on disk, then simply **don't**\npass any `diff: path` to the `createDiff` method. The method will then\nresolve a `Buffer` containing the diff. You can also specify buffer format\nwith `extension` key. Default extension is `png`. List of supported formats:\n*`heic`, `heif`, `avif`, `jpeg`, `jpg`, `png`, `raw`, `tiff`, `tif`, `webp`, `gif`, `jp2`, `jpx`, `j2k`, `j2c`*\n\n```javascript\nconst buffer = await looksSame.createDiff({\n    // exactly same options as above, but with optional extension and without diff\n    extension: 'png'\n});\n```\n\n## Comparing images and creating diff image simultaneously\n\nIf you need both co compare images and create diff image, you can pass option `createDiffImage: true`,\nit would work faster than two separate function calls:\n\n```javascript\nconst {\n    equal,\n    diffImage,\n    differentPixels,\n    totalPixels,\n    diffBounds,\n    diffClusters\n} = await looksSame('image1.png', 'image2.png', {createDiffImage: true});\n\nif (!equal) {\n    await diffImage.save('diffImage.png');\n}\n```\n\n## Comparing colors\n\nIf you just need to compare two colors you can use `colors` function:\n\n```javascript\nconst equal = looksSame.colors(\n    {R: 255, G: 0, B: 0},\n    {R: 254, G: 1, B: 1},\n    {tolerance: 2.5}\n);\n```\n","funding_links":[],"categories":["JavaScript","graphic (图形库)"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgemini-testing%2Flooks-same","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgemini-testing%2Flooks-same","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgemini-testing%2Flooks-same/lists"}