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

Category: Color , Javascript , Recommended | August 7, 2018
Author:fast-average-color
Views Total:1,629 views
Official Page:Go to website
Last Update:August 7, 2018
License:MIT

Preview:

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

Description:

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:

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();

You Might Be Interested In:


Leave a Reply