@soarlin/angular-color-thief

An Angular service for extracting dominant colors and color palettes from images. Rewritten based on the concept of Color Thief.

Features

- Extract dominant color from images
- Generate color palette from images
- Support loading images from URLs
- Full TypeScript support
- Angular v19+ support

Installation

``bash


Using npm

`typescript
import { ColorThiefModule } from '@soarlin/angular-color-thief';

@NgModule({
imports: [ColorThiefModule]
})
export class AppModule { }

// Or in a standalone component
@Component({
// ...
imports: [ColorThiefModule]
})
`

$3

`typescript
import { Component } from '@angular/core';
import { ColorThiefService } from '@soarlin/angular-color-thief';

@Component({
selector: 'app-root',
template:

// Or get palette directly from URL
async loadPaletteFromUrl() {
try {
this.palette = await this.colorThief.getPaletteFromUrl(this.imageUrl);
} catch (error) {
console.error('Failed to load image:', error);
}
}
}
`

API

$3

#### getColor(sourceImage: HTMLImageElement, quality?: number): [number, number, number]

Extract the dominant color from an image. Returns an RGB color array.

- sourceImage: The image element
- quality: Sampling quality (1 is highest quality, 10 is default)

#### getPalette(sourceImage: HTMLImageElement, colorCount?: number, quality?: number): [number, number, number][]

Extract a color palette from an image. Returns an array of RGB color arrays.

- sourceImage: The image element
- colorCount: Number of colors to extract (default is 10)
- quality: Sampling quality (1 is highest quality, 10 is default)

#### getPaletteFromUrl(imageUrl: string, count?: number, quality?: number): Promise<[number, number, number][]>

Extract a color palette from an image URL. Returns a Promise that resolves to an array of RGB color arrays.

- imageUrl: URL of the image
- count: Number of colors to extract (default is 5)
- quality`: Sampling quality (1 is highest quality, 10 is default)

Important Notes

- Images must be from the same domain or have appropriate CORS settings
- It's recommended to call color extraction methods after the image is fully loaded
- Lower quality values result in longer processing time but more accurate results

License

MIT

Author

Soar Lin (https://github.com/SoarLin)