https://github.com/ianmurrays/ngcolorthief

ColorThief wrapper for AngularJS
https://github.com/ianmurrays/ngcolorthief

angular angularjs color-thief

Last synced: 10 days ago
JSON representation

ColorThief wrapper for AngularJS

• Host: GitHub
• URL: https://github.com/ianmurrays/ngcolorthief
• Owner: ianmurrays
• License: mit
• Created: 2014-09-24T14:51:28.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-08T20:32:22.000Z (over 8 years ago)
• Last Synced: 2025-04-16T20:42:21.005Z (about 1 month ago)
• Topics: angular, angularjs, color-thief
• Size: 5.86 KB
• Stars: 36
• Watchers: 2
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngColorThief

ngColorThief is a wrapper for the [ColorThief](https://github.com/lokesh/color-thief) library to extract dominant colors and color palettes from images.

**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.

## Installation

Install via bower

    bower install angular-colorthief --save

Or just copy the `angular-colorthief.min.js` file to your project. Next, add the module as a dependency to your project:

    angular.module('yourApp', ['ngColorThief'])

## How To

ngColorThief provides a service and a directive. The simplest way to grab colors is to use the directive on an image tag:

    

When the image loads, `myDominantColor` will contain an array with the dominant color (eg: `[255, 250, 109]`). You could apply this to the container:

    


        

    


You can also grab a color palette:

    

And specify a color count

    

The service simply provides an almost direct interface to a colorThief instance:

    app.controller('MyCtrl', function ($colorThief) {

      var image = /*...*/;

      var dominant = $colorThief.getColor(image);

      var palette = $colorThief.getPalette(image);

    });

    

Refer to ColorThief's documentation to know more.

## Global Settings

You can configure global settings via the provider

    app.config(function ($colorThiefProvider) {

      // Set the default quality

      $colorThiefProvider.setDefaultQuality(50);

      // Set the default palette color count

      $colorThiefProvider.setDefaultColorCount(4);

      // Set wether to return arrays (ColorThief's default) or

      // objects like {r: 242, g: 124, b: 91} (false by default).

      $colorThiefProvider.setReturnObjects(true);

    });

    

## Minimizing

The library is minimized using Closure Compiler with the following command

    closure-compiler --js_output_file=angular-colorthief.min.js --compilation_level SIMPLE angular-colorthief.js

    

## Contributing

Pull requests are welcome! Please fork, create a branch and submit a pull request.

## License

MIT License.