{"id":20940652,"url":"https://github.com/ianmurrays/ngcolorthief","last_synced_at":"2025-05-13T23:30:37.407Z","repository":{"id":21118525,"uuid":"24419200","full_name":"ianmurrays/ngColorThief","owner":"ianmurrays","description":"ColorThief wrapper for AngularJS","archived":false,"fork":false,"pushed_at":"2016-09-08T20:32:22.000Z","size":6,"stargazers_count":36,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-16T20:42:21.005Z","etag":null,"topics":["angular","angularjs","color-thief"],"latest_commit_sha":null,"homepage":null,"language":null,"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/ianmurrays.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":"2014-09-24T14:51:28.000Z","updated_at":"2019-10-17T17:29:17.000Z","dependencies_parsed_at":"2022-07-27T01:16:59.554Z","dependency_job_id":null,"html_url":"https://github.com/ianmurrays/ngColorThief","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmurrays%2FngColorThief","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmurrays%2FngColorThief/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmurrays%2FngColorThief/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmurrays%2FngColorThief/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianmurrays","download_url":"https://codeload.github.com/ianmurrays/ngColorThief/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043215,"owners_count":22004911,"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":["angular","angularjs","color-thief"],"created_at":"2024-11-18T23:11:19.308Z","updated_at":"2025-05-13T23:30:37.146Z","avatar_url":"https://github.com/ianmurrays.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngColorThief\n\nngColorThief is a wrapper for the [ColorThief](https://github.com/lokesh/color-thief) library to extract dominant colors and color palettes from images.\n\n**Note:** cross-domain images will not work unless they're served with the correct CORS headers. Furthermore, you need to add the `cross-origin` attribute to image tags for this to work.\n\n## Installation\n\nInstall via bower\n\n    bower install angular-colorthief --save\n\nOr just copy the `angular-colorthief.min.js` file to your project. Next, add the module as a dependency to your project:\n\n    angular.module('yourApp', ['ngColorThief'])\n\n## How To\n\nngColorThief provides a service and a directive. The simplest way to grab colors is to use the directive on an image tag:\n\n    \u003cimg ng-src=\"{{myImage}}\" color-thief color-thief-dominant=\"colors.myDominantColor\"\u003e\n\nWhen the image loads, `myDominantColor` will contain an array with the dominant color (eg: `[255, 250, 109]`). You could apply this to the container:\n\n    \u003cdiv class=\"container\" ng-style=\"{'background-color': 'rgb('+colors.dominantColor[0]+', '+colors.dominantColor[1]+', '+colors.dominantColor[2]+')'}\"\u003e\n        \u003cimg ng-src=\"{{myImage}}\" color-thief color-thief-dominant=\"colors.myDominantColor\"\u003e\n    \u003c/div\u003e\n\nYou can also grab a color palette:\n\n    \u003cimg ng-src=\"{{myImage}}\" color-thief color-thief-palette=\"colors.myPalette\"\u003e\n\nAnd specify a color count\n\n    \u003cimg ng-src=\"{{myImage}}\" color-thief color-thief-palette=\"colors.myPalette\" color-thief-palette-count=\"4\"\u003e\n\nThe service simply provides an almost direct interface to a colorThief instance:\n\n    app.controller('MyCtrl', function ($colorThief) {\n      var image = /*...*/;\n\n      var dominant = $colorThief.getColor(image);\n      var palette = $colorThief.getPalette(image);\n    });\n    \nRefer to ColorThief's documentation to know more.\n\n## Global Settings\n\nYou can configure global settings via the provider\n\n    app.config(function ($colorThiefProvider) {\n      // Set the default quality\n      $colorThiefProvider.setDefaultQuality(50);\n\n      // Set the default palette color count\n      $colorThiefProvider.setDefaultColorCount(4);\n\n      // Set wether to return arrays (ColorThief's default) or\n      // objects like {r: 242, g: 124, b: 91} (false by default).\n      $colorThiefProvider.setReturnObjects(true);\n    });\n    \n## Minimizing\n\nThe library is minimized using Closure Compiler with the following command\n\n    closure-compiler --js_output_file=angular-colorthief.min.js --compilation_level SIMPLE angular-colorthief.js\n    \n## Contributing\n\nPull requests are welcome! Please fork, create a branch and submit a pull request.\n\n## License\n\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianmurrays%2Fngcolorthief","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianmurrays%2Fngcolorthief","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianmurrays%2Fngcolorthief/lists"}