Extracting The Average Color From Images Or Videos – Fast Average Color

Fast Average Color is a modern (ES6) JavaScript library which lets you extract the Average Color from images, videos or canvas elements.

See also:

• Generate Gradients From Dominant Colors In An Image – Grade.js
• Adaptive Image Background Color – Adaptive Backgrounds
• Extract The Dominant Color of An Image – Primarycolor.js
• jQuery Plugin For Grabbing Image Color – imgcolr
• Image Color Palette Generating Plugin – Color Thief
• jQuery Plugin For Adaptive Image Background Color
• Extract Dominant Image Colors in JavaScript – major-color-picker

How to use it:

Installation.

# NPM
$ npm install fast-average-color --save

Import module:

import FastAverageColor from 'fast-average-color/dist/index.es6';

Or Include the compiled version of the Fast Average Color from a CDN.

<script src="//unpkg.com/fast-average-color/dist/index.min.js"></script>

Initialize the Fast Average Color.

const demo = new FastAverageColor(),

Get the average color from an image you specify.

const myColor = demo.getColor(container.querySelector('img'));

This will return an object containing the average color in different color modes.

{
  hex: "#ffffff",
  hexa: "#ffffffff",
  isDark: false,
  isLight: true,
  rgb: "rgb(255,255,255)",
  rgba: "rgba(255,255,255,1)",
  // ...
}

Possible options.

const myColor = demo.getColor(container.querySelector('img'),{
      defaultColor: [255, 255, 255, 255]],
      mode: "speed", // "precision" or "speed"
      algorithm: "sqrt", // "simple" or "sqrt"
      step: 1,
      left: 0,
      top: 0,
      width: 400, // width of resource
      height: 300 // height of resource
      
});

Get the average color asynchronously.

demo.getColorAsync(resource, callback, [options])

Get the average color from an array.

demo.getColorFromArray4(array, {
  defaultColor: [255, 255, 255, 255]],
  algorithm: "sqrt", // "simple" or "sqrt"
  step: 1,
})

Destroy the library.

demo.destroy();