Generate various RGBA color palettes based on image pixel data
npm install @jayimbee/paletteGenerate various RGBA color palettes based on image pixel data
``shell`
npm i @jayimbee/palette
`typescript
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
// }
// ...
// ]
`
Type: Function
Description: _returns a single blend of all pixel color values_
âď¸ Params
- d : value returned from a canvas context calling .getImageData().data
`typescript
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
`
`typescript
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.blend(imgData);
`
---
Type: Function
Description: _returns the most reoccurring pixel color_
âď¸ Params
- d : value returned from a canvas context calling .getImageData().data
`typescript
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.dominant(imgData);
`
`typescript
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
`
---
Type: Function
Description: _accepts a hex string and converts it to the type
âď¸ Params
- hex
`typescript
const hex = "#ff7236";
const converted = palette.hexToRGBARecord(hex);
console.log(converted);
// { r: 255, g: 114, b: 54, a: 1 }
`
---
Type: Function
Description: _accepts an rgb or rgba color strings and converts it to the type
âď¸ Params
- rgb(a)
`typescript
const rgb = "rgb(12, 45, 111)";
const rgba = "rgba(12, 45, 111, 1)";
const converted1 = palette.rgbToRGBARecord(rgb);
const converted2 = palette.rgbToRGBARecord(rgb);
console.log(converted1);
// { r: 12, g: 45, b: 111, a: 1 }
console.log(converted2);
// { r: 12, g: 45, b: 111, a: 1 }
`
---
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
- value returned from a canvas context calling
- startingDepth
- _default set to 0_
- maxDepth
- _default set to 2_
`typescript
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.quantize(imgData);
`
`typescript
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
}
`
---
Type: Function
Description: _a utility function that extracts image data through writing an image source into a canvas context_
âď¸ Params
- src
- an image src
- sizeDividend
- anonymousOrigin
- flag for setting crossoriginAnonymous to the canvas image source. Defaults to true.
- 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 and CANVAS.height by some number:
`typescript
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;
`
đ¨ 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
`typescript`
palette.extractImageDataFromSrc(imgData);
`
---
Type: Function
Description: _accepts an RGBA record and calculates that color's complimentary counterpart_
âď¸ Params
- color
`typescript
const hex = "#ff7236";
const converted = palette.hexToRGBARecord(hex);
const complementary = palette.complementary(converted);
console.log(complementary);
// 'hsl(197.91, 100.00%, 60.59%)'
`
`typescript`
---
Type: Function
Description:_returns a monochromatic object with colors ranginng in a spectrum from dark to light_
âď¸ Params
- percent:
- the percentage value used in shifting the lightness value of provided RGB value
- numOfColors:
- default set to 4
- the amount of returned monochromatic colors
- rgb:
- an object containing the fields r, g, b
`typescript
const imgData = palette.extractImageDataFromSrc(imgURL, 3);
palette.monochromatic(imgData);
`
`typescript
interface RGBARecord {
r: number;
g: number;
b: number;
a: number;
};
interface MonoChromatic {
light: RGBARecord[];
dark: RGBARecord[];
original: RGBARecord;
};
``