{"id":15038879,"url":"https://github.com/vibrant-colors/node-vibrant","last_synced_at":"2025-05-14T08:05:06.833Z","repository":{"id":33228361,"uuid":"36871951","full_name":"Vibrant-Colors/node-vibrant","owner":"Vibrant-Colors","description":"🎨 Extract prominent colors from an image","archived":false,"fork":false,"pushed_at":"2025-04-04T14:59:21.000Z","size":24387,"stargazers_count":2226,"open_issues_count":21,"forks_count":111,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-14T08:03:02.026Z","etag":null,"topics":["canvas","color","colour","detection","image","muted","picture","varation","vibrant"],"latest_commit_sha":null,"homepage":"https://vibrant.dev","language":"TypeScript","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/Vibrant-Colors.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2015-06-04T13:30:08.000Z","updated_at":"2025-05-08T10:47:43.000Z","dependencies_parsed_at":"2024-06-03T23:33:34.562Z","dependency_job_id":"f968f920-5e7d-4d48-82d9-3f21091e2658","html_url":"https://github.com/Vibrant-Colors/node-vibrant","commit_stats":{"total_commits":83,"total_committers":16,"mean_commits":5.1875,"dds":0.4457831325301205,"last_synced_commit":"8843d0094834d4685d1bff3abd77c6dd2daff82c"},"previous_names":["akfish/node-vibrant"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vibrant-Colors%2Fnode-vibrant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vibrant-Colors%2Fnode-vibrant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vibrant-Colors%2Fnode-vibrant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vibrant-Colors%2Fnode-vibrant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vibrant-Colors","download_url":"https://codeload.github.com/Vibrant-Colors/node-vibrant/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101588,"owners_count":22014907,"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":["canvas","color","colour","detection","image","muted","picture","varation","vibrant"],"created_at":"2024-09-24T20:40:37.217Z","updated_at":"2025-05-14T08:05:06.809Z","avatar_url":"https://github.com/Vibrant-Colors.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# node-vibrant\n\n\u003ca href=\"https://www.npmjs.com/package/node-vibrant\" target=\"\\_parent\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/dm/node-vibrant.svg\" /\u003e\n\u003c/a\u003e\u003ca href=\"https://bundlephobia.com/package/node-vibrant@latest\" target=\"\\_parent\"\u003e\n  \u003cimg alt=\"\" src=\"https://badgen.net/bundlephobia/minzip/node-vibrant\" /\u003e\n\u003c/a\u003e\u003ca href=\"https://github.com/Vibrant-Colors/node-vibrant/discussions\"\u003e\n  \u003cimg alt=\"Join the discussion on Github\" src=\"https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue\" /\u003e\n\u003c/a\u003e\u003ca href=\"https://bestofjs.org/projects/node-vibrant\"\u003e\u003cimg alt=\"Best of JS\" src=\"https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=Vibrant-Colors%2Fnode-vibrant%26since=daily\" /\u003e\u003c/a\u003e\u003ca href=\"https://github.com/Vibrant-Colors/node-vibrant/\" target=\"\\_parent\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/github/stars/Vibrant-Colors/node-vibrant.svg?style=social\u0026label=Star\" /\u003e\n\u003c/a\u003e\n\n\u003cimg align=\"right\" width=\"265\" src=\"./media/logo.png?raw=true\"\u003e\n\nExtract prominent colors from an image.\n\n- Identical API for node.js, browser, and worker environments\n\n## Install\n\n```bash\n$ npm install node-vibrant\n```\n\n## Usage\n\n```typescript\n// Node\nimport { Vibrant } from \"node-vibrant/node\";\n// Browser\nimport { Vibrant } from \"node-vibrant/browser\";\n// Web Worker\nimport { Vibrant } from \"node-vibrant/worker\";\n\n// Using builder\nVibrant.from(\"path/to/image\")\n\t.getPalette()\n\t.then((palette) =\u003e console.log(palette));\n\n// Using constructor\nlet v = new Vibrant(\"path/to/image\", opts);\nv.getPalette().then((palette) =\u003e console.log(palette));\n```\n\n### Worker Usage\n\nQuantization is the most time-consuming stage in `node-vibrant`. Luckily, the quantization can be run in the WebWorker to avoid freezing the UI thread.\n\nHere's how to use this feature:\n\n```typescript\nimport { Vibrant, WorkerPipeline } from \"node-vibrant/worker\";\nimport PipelineWorker from \"node-vibrant/worker.worker?worker\";\n\nVibrant.use(new WorkerPipeline(PipelineWorker as never));\n```\n\nThis requires your bundler to handle `?worker` transforms [similar to how Vite does](https://vite.dev/guide/features.html#import-with-query-suffixes)\n\n## Documentation\n\nDocs can be seen currently in the [`docs`](./docs) folder. It includes reference docs and step-by-step guides.\n\nWe also have a few [`examples`](./examples) that you can reference for your needs.\n\nPRs welcomed to expand either of these!\n\n## Notes\n\n### Result Consistency\n\nThe results are consistent within each user's browser instance regardless of the visible region or display size of an image, unlike the original `vibrant.js` implementation.\n\nHowever, due to the nature of the HTML5 canvas element, image rendering is platform/machine-dependent. The resulting swatches may vary between browsers, Node.js versions, and between machines. See [Canvas Fingerprinting](https://en.wikipedia.org/wiki/Canvas_fingerprinting).\n\nThe test specs use CIE delta E 1994 color difference to measure inconsistencies across platforms. It compares the generated color on Node.js, Chrome, Firefox, and IE11. At `quality` == 1 (no downsampling) with no filters and the results are rather consistent. Color diffs between browsers are mostly not perceptible by the human eye. Downsampling _will_ cause perceptible inconsistent results across browsers due to differences in canvas implementations.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvibrant-colors%2Fnode-vibrant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvibrant-colors%2Fnode-vibrant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvibrant-colors%2Fnode-vibrant/lists"}