@davidegheri/gm-palette

gm-palette

Dominant color and palette using graphicsmagick.

Getting started

First download and install GraphicsMagick. In Mac OS X, you can simply use Homebrew and do:

$ brew install graphicsmagick

then use npm to install the module:

$ npm install @davidegheri/gm-palette

Features

• Retrieve dominant color and palette.
• GIF format supported.
• Provide the count of palette colors to obtain.
• The input can be path to image, buffer or a readable stream
• CLI script

Basic Usage

const gmPalette = require('@davidegehri/gm-palette')

//If callback is not provided, Promise is returned.
gmPalette.dominantColor('path/to/image.jpg', (error, data) => {
  if (error) {
      console.log('Error', error);
  }
  console.log('Result: ', data);

  //{ r: 54, g: 56, b: 62 }
});

//If callback is not provided, Promise is returned.
gmPalette.dominantColor('/path/to/animated.gif[0]', (error, data) => {
  if (error) {
      console.log('Error', error);
  }
  console.log('Result: ', data);

  //{ r: 54, g: 56, b: 62 }
});


const count = 10; // Optional number of palette colors, default 5
//If callback is not provided, Promise is returned.
gmPalette.palette('path/to/image.jpg', count,  (error, data) => { 
  // If count is not provided, a default value of 10 is taken.
  if (error) {
      console.log('Error', error);
  }
  console.log('Result: ', data);
  /*
  [ 
    { r: 28, g: 31, b: 38 },
    { r: 59, g: 61, b: 66 },
    { r: 62, g: 64, b: 69 },
    { r: 64, g: 63, b: 70 },
    { r: 65, g: 65, b: 63 },
    { r: 72, g: 72, b: 78 },
    { r: 122, g: 124, b: 130 },
    { r: 125, g: 128, b: 132 },
    { r: 155, g: 156, b: 159 },
    { r: 214, g: 215, b: 217 }
  ]
  */
});

Buffer

const gmPalette = require('@davidegheri/gm-palette'),
      imageBuffer = require('fs').readFileSync('/path/to/image.jpg'),
      count = 10;


//If callback is not provided, Promise is returned.
gmPalette.dominantColor(imageBuffer, (error, data) => {
  if (error) {
      console.log('Error', error);
  }
  console.log('Result: ', data);

  //{ r: 54, g: 56, b: 62 }
});

//If callback is not provided, Promise is returned.
gmPalette.palette(imageBuffer, count,  (error, data) => { 
  if (error) {
      console.log('Error', error);
  }
  console.log('Result: ', data);
  /*
  [ 
    { r: 28, g: 31, b: 38 },
    { r: 59, g: 61, b: 66 },
    { r: 62, g: 64, b: 69 },
    { r: 64, g: 63, b: 70 },
    { r: 65, g: 65, b: 63 },
    { r: 72, g: 72, b: 78 },
    { r: 122, g: 124, b: 130 },
    { r: 125, g: 128, b: 132 },
    { r: 155, g: 156, b: 159 },
    { r: 214, g: 215, b: 217 }
  ]
  */
})

Stream

const gmPalette = require('@davidegheri/gm-palette'),
      readableStream = fs.createReadStream('/path/to/my/img.jpg');

//If callback is not provided, Promise is returned.
gmPalette.dominantColor(readableStream, (error, data) => {
  if (error) {
      console.log('Error', error);
  }
  console.log('Result : ', data);

  //{ r: 54, g: 56, b: 62 }
})

//If callback is not provided, Promise is returned.
gmPalette.palette(readableStream, (error, data) => {
  if (error) {
      console.log('Error', error);
  }
  console.log('Result : ', data);
  /*
  [ 
    { r: 28, g: 31, b: 38 },
    { r: 59, g: 61, b: 66 },
    { r: 62, g: 64, b: 69 },
    { r: 64, g: 63, b: 70 },
    { r: 65, g: 65, b: 63 },
  ]
  */
})

GIF

You can get a base64 encoded string representing a 1x1px GIF filled with the dominant color

const gmPalette = require('@davidegheri/gm-palette');

//If callback is not provided, Promise is returned.
gmPalette.dominantColorGIF('path/to/image.jpg', (error, data) => {
    if (error) {
        console.log('Error', error);
    }
    console.log('Result: ', data);
    
    // data:image/gif;base64,R0lGODlhAQABAIABAEMsZgAAACwAAAAAAQABAAACAkQBAA==
})

Cli

gm-palette comes also with a handy Cli script:

$ npm i -g @davidegheri/gm-palette

$ gm-palette path/to/img.jpg

# [ 
#  { r: 28, g: 31, b: 38 },
#  { r: 59, g: 61, b: 66 },
#  { r: 62, g: 64, b: 69 },
#  { r: 64, g: 63, b: 70 },
#  #{ r: 65, g: 65, b: 63 },
# ]

To get the dominant color only:

$ gm-palette path/to/img.jpg --dominant
# or
$ gm-palette path/to/img.jpg -d

# { r: 54, g: 56, b: 62 }

To get the base64 encoded GIF:

$ gm-palette path/to/img.jpg --gif
# or
$ gm-palette path/to/img.jpg -g

# data:image/gif;base64,R0lGODlhAQABAIABAEMsZgAAACwAAAAAAQABAAACAkQBAA==