Dominant Color

This is a JavaScript library that allows you to extract the dominant color from images. It provides an easy-to-use interface to get started quickly.

Installation

To install the library, use the following command:

npm i @rtcoder/dominant-color

Usage

Import the getDominantColor function from @rtcoder/dominant-color in your JavaScript file:

import { getDominantColor } from "@rtcoder/dominant-color";

Select an image element from your HTML:

const img = document.querySelector('img');

Call the getDominantColor function with the image element and configuration options:

getDominantColor(img, {
    downScaleFactor: 1,
    skipPixels: 0,
    colorsPaletteLength: 5,
    paletteWithCountOfOccurrences: false,
    colorFormat: 'rgb',
    callback: (color, palette) => {
        // Your code here
    }
});

Configuration Options

The getDominantColor function accepts the following configuration options:

Name	Type	Default Value	Description
downScaleFactor	number	1	Factor of scale down for the image. Recommended for large images.
skipPixels	number	0	Skips every n pixels while determining the dominant color. Recommended for large images.
colorsPaletteLength	number	5	Length of the returned color palette.
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 that receives the dominant color and the colors palette.

Interfaces

The library provides the following interfaces for type checking:

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;

Feel free to explore and utilize these interfaces for better code development.

Remember to replace your code here in the usage example with your own code to handle the dominant color and colors palette.