Image colors (base and by pixel; palette)

Quick start

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample [@jzucen/image-color-js]</title>
    <script src="path/to/dist/image-color-js.js"></script>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

((addEventListener, imageColor) => {
  addEventListener('load', () => {
    imageColor.loadImage('image-url or base64-encoded-image')
      .then(image => {
        const imageData = imageColor.getImageData(image);
        const palette = imageColor.getPalette(imageData);
        console.info(palette);
      })
      .catch(error => {
        document.body.innerHTML = `<pre>${error}</pre>`;
        console.error(error);
        throw error;
      });
  });
})(window.addEventListener, window.ImageColorJs);

Options

Global settings - changing them will affect the operation of all functions if the required local values are not passed to them as parameters.

Constant/property/method	Description
`Integer<1…255> colorSimilarity`	The degree of similarity of colors for combining. The smaller, the more accurate the palette.
`Object colorExcludes`	Options for excluding colors from the palette: `{ ?Float<0…1> alpha, ?Float<0…1> black, ?Float<0…1> white }`
`?Float<0…1>\|undefined excludeByAlpha`	Exclude a color from the palette if its alpha channel value is less than the specified value.
`?Float<0…1>\|undefined excludeByBlack`	Exclude a color from the palette if its percentage of similarity to black exceeds this value.
`?Float<0…1>\|undefined excludeByWhite`	Exclude a color from the palette if its percentage of similarity to white exceeds this value.
`Integer<1…255> paletteSize`	Palette size.
`[static] String EXCLUDE_ALPHA`	The name of the property (`alpha`) in the `colorExcludes` object to exclude color from the alpha channel.
`[static] String EXCLUDE_BLACK`	The name of the property (`black`) in the `colorExcludes` object to exclude color based on similarity to black.
`[static] String EXCLUDE_WHITE`	The name of the property (`white`) in the `colorExcludes` object to exclude color based on similarity to white.
`[static] Object DEFAULTS`	Default values for `colorSimilarity`, `colorExcludes` and `paletteSize`.
`self copy ()`	Create a full copy of this object.
`Object get()`	Get all settings (`colorSimilarity`, `colorExcludes` and `paletteSize`) as object.
`this reset ()`	Reset all settings to default values.
`this resetColorSimilarity ()`	Reset `colorSimilarity` to default value.
`this resetColorExcludes ()`	Reset `colorExcludes` to default value.
`this resetPaletteSize ()`	Reset `paletteSize` to default value.
`this setColorSimilarity (Integer<1…255> value)`	Set new value of `colorSimilarity`.
`this setColorExcludes (?Object value)`	Set new value of `colorExcludes` (all empty, if undefined).
`this setExcludeByAlpha (?Float<0…1> value)`	Set new value of `colorExcludes.alpha`.
`this setExcludeByBlack (?Float<0…1> value)`	Set new value of `colorExcludes.black`.
`this setExcludeByWhite (?Float<0…1> value)`	Set new value of `colorExcludes.white`.
`this setPaletteSize (Integer<1…255> value)`	Set new value of `paletteSize`.

// New value for color exclusion: all by default, for white - its own value.
const excludes = imageColor.options.copy().reset().setExcludeByWhite(0.5).colorExcludes;

Functions

Function
`async Image\|HTMLImageElement loadImage (String image)`
`ImageData getImageData (Image\|HTMLImageElement image)`
`ColorRGB getPixelColor (ImageData imageData, ?Integer left, ?Integer top)`
`Array<ColorInfo> getPalette (ImageData imageData, ?Integer left, ?Integer top, ?Integer width, ?Integer height, ?Integer<1…255> size, ?Object excludes)`
`ColorRGB getImageColor (ImageData imageData, ?Integer left, ?Integer top, ?Integer width, ?Integer height, ?Object excludes)`
`ColorRGB getDominantColor (ImageData imageData, ?Integer left, ?Integer top, ?Integer width, ?Integer height, ?Object excludes)`

Here:

loadImage() is part of node-canvas package;
if left/top undefined - they will be equal to minimal allowed;
if width/height undefined - they will be equal to maximal allowed;
if size undefined - it will be equal to options.paletteSize;
if excludes undefined - it will be equal to options.colorExcludes;
ColorRGB - object from @jzucen/colors-js library;
ColorInfo - object { ColorRGB color, Integer count };
getDominantColor() is alias to getImageColor().

// All parameters left/top/width/height/size are default
const palette = imageColor.getPalette(imageData, ...Array(5), excludes);

Built-in sample

# build docker & go inside it
make vm-build
# or: docker-compose build
make vm-up
# or: docker-compose up --detach
make vm-console
# or: docker exec -u 1000:1000 --env HOME=/var/www -it image-color-js-node bash

# prepare scripts/styles/images in public directory
make public

# exit & stop docker
exit
make vm-down
# or: docker-compose down --volumes

# open "public/index.html" in browser

screenshot

Image colors (base and by pixel; palette)

Quick start

Options

Functions

Built-in sample

Описание

Конвейеры