1.1.1 • Published 10 months ago

rgbaster-plus v1.1.1

Weekly downloads
-
License
-
Repository
github
Last release
10 months ago

NPM version Downloads

rgbaster-plus

A dead simple, zero-dependency, promise-based typescript library for extracting the dominant color(s) from an image (in the browser).It's based on rgbaster with some bugs fixed and type declaration files provided

Installation

npm install --save rgbaster-plus

Usage

This library exports a default function which returns a promise resolving to a sorted array with the most dominant color at index 0, secondary at index 1, so on and so forth.

[
  { color: "rgb(0,0,255)", count: 86 },
  { color: "rgb(9,18,42)", count: 32 },
  { color: "rgb(120,8,202)", count: 3 },
];
import analyze from "rgbaster-plus";

const result = await analyze("/2px-blue-and-1px-red-image.png"); // also supports base64 encoded image strings

console.log(`The dominant color is ${result[0].color} with ${result[0].count} occurrence(s)`);
// => The  dominant color is rgb(0,0,255) with 2 occurrence(s)

console.log(`The secondary color is ${result[1].color} with ${result[1].count} occurrence(s)`);
// => The  secondary color is rgb(255,0,0) with 1 occurrence(s)

Configuration options

You may pass an optional second parameter, an object, with the following options:

ignore

An array of colors to ignore (in the form of rgb) when counting colors.

const result = await analyze("/image.png", { ignore: ["rgb(255,255,255)", "rgb(0,0,0)"] });

scale

In order to achieve greater speed, you can have rgbaster-plus scale down the image we use internally prior to analysis, thus decreasing accuracy.

const result = await analyze("/image.png", { scale: 0.6 });