@jayimbee/palette v1.0.6
Palette
Generate various RGBA color palettes based on image pixel data
Installing
npm i @jayimbee/palette
Example
import palette from @jaimbee/palette;
const imgData = palette.extractImageDataFromSrc('https://some.site.com/godzilla.png', 3);
const imageColorPalette = palette.quantize(imgData);
console.log(imageColorPalette);
//
// [
// {
// r: 123,
// g: 145,
// b: 12,
// a: 255
// }
// ...
// ]
Methods
šØ blend
Type: Function
Description: returns a single blend of all pixel color values
āļø Params
- d
<Uint8ClampedArray>
: value returned from a canvas context calling.getImageData().data
š¦ Returns
<RGBARecord>;
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
š ļø Usage
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.blend(imgData);
šØ dominant
Type: Function
Description: returns the most reoccurring pixel color
āļø Params
- d
<Uint8ClampedArray>
: value returned from a canvas context calling.getImageData().data
š ļø Usage
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.dominant(imgData);
š¦ Returns
<RGBARecord>;
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
šØ quantize
Type: Function
Description: using the median cut algorithm, this returns an array of colors selected through finding the dominant color range and quantizing the color sets until the provided max depth is reached
āļø Params
- d
<Uint8ClampedArray>
- value returned from a canvas context calling
.getImageData().data
- value returned from a canvas context calling
- startingDepth
<number>
- default set to 0
- maxDepth
<number>
- default set to 2
š ļø Usage
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.quantize(imgData);
š¦ Returns
<RGBARecord>[];
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
šØ extractImageDataFromSrc
Type: Function
Description: a utility function that extracts image data through writing an image source into a canvas context
āļø Params
- src
<string>
- an image src
sizeDividend
<number>
- default set to
1
- this is primarily for making the median cut algorithm more performant by reducing image size while keeping aspect ration in tact. Very large images require a lot of processing, so supplying a size dividend can speed up this palette generating process while keeping the final palette that is generated mostly unaffected within reason.
- A custom implementation can utilize a size dividend by dividing the
CANVAS.width
andCANVAS.height
by some number:
const IMAGE = new Image(); const CANVAS = document.createElement("canvas"); IMAGE.src = src; await IMAGE.decode(); CANVAS.width = IMAGE.width / sizeDividend; CANVAS.height = IMAGE.height / sizeDividend;
- default set to
šØ Calling getImageData
on an Image that's loaded with a source that is cross-origin is known to create CORS issues via the tainted canvas error. This helper is here to simplify the process of getting image data, but a custom implementation of this may be a better solution for some. Things to note with this function is the resource server handling the requested image must include the response header: Access-Control-Allow-Origin
.
š If .quantize()
is running too slow, reduce the size of the image as show above
š ļø Usage
palette.extractImageDataFromSrc(imgData);
š¦ Returns
<Uint8ClampedArray>;
šØ monochromatic
Type: Function
Description:returns a monochromatic object with colors ranginng in a spectrum from dark to light
āļø Params
- d
<Uint8ClampedArray>
- value returned from a canvas context calling
.getImageData().data
- value returned from a canvas context calling
- numOfColors:
- default set to
4
- the amount of returned monochromatic colors
- default set to
rgb:
{r: number, g: number, b: number}
- an object containing the fields
r, g, b
- an object containing the fields
š ļø Usage
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.monochromatic(imgData);
š¦ Returns
<MonoChromatic>;
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
};
interface MonoChromatic {
light: RGBARecord[];
dark: RGBARecord[];
original: RGBARecord;
};