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

Category: Color , Javascript , Recommended | August 7, 2018
Views Total:3,062 views
Official Page:Go to website
Last Update:August 7, 2018


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:

How to use it:


$ 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.


You Might Be Interested In:

Leave a Reply