0.1.3 • Published 3 years ago
@rtcoder/dominant-color v0.1.3
Dominant color
Get dominant color from images using only JavaScript
Installation
npm i @rtcoder/dominant-colorUsage
import {getDominantColor} from "@rtcoder/dominant-color";
const img = document.querySelector('img');
getDominantColor(img, {
downScaleFactor: 1,
skipPixels: 0,
colorsPaletteLength: 5,
paletteWithCountOfOccurrences: false,
colorFormat: 'rgb',
callback: (color, palette) => {
// your code here
}
});Config options
| Name | Type | Default value | Description |
|---|---|---|---|
downScaleFactor | number | 1 | factor of scale down of image, recommend to use for many large images |
skipPixels | number | 0 | when larger than 0, skips every n pixels of while determine dominant color, recommend to use for large images |
colorsPaletteLength | number | 5 | length of returned palette of colors |
paletteWithCountOfOccurrences | boolean | false | determines whether to return colors with the number of occurrences |
colorFormat | string | 'rgb' | defines the format of the returned colors, available values are 'rgb', 'hsl' and 'hex' |
callback | function | empty function | callback function |
Interfaces
type ColorFormat = 'rgb' | 'hsl' | 'hex';
interface PrimaryColor {
color: string;
count: number;
}
interface DominantColorOptions {
downScaleFactor: number;
skipPixels: number;
colorsPaletteLength: number;
paletteWithCountOfOccurrences: boolean;
colorFormat: ColorFormat;
callback: DominantColorCallback;
}
type DominantColorCallback = (dominant: string, colorsPalette: (string[]) | (PrimaryColor[])) => void;
function getDominantColor(element: HTMLImageElement, options: Partial<DominantColorOptions>): void