A client-side histogram library for same-origin images

by Pomax, code freely available on github

Download the library here (7kb). Alternatively, if you use bower (and you hopefully do) just use "bower install rgbanalyse".

This library sets up a global RGBAnalyse object, which has a fairly straight-forward API:

defaults: a settings object with default values as analysis options.
analyse(img,[options]): performs image analysis on an image element, with optional tweaks.
computeHSL(r,g,b): convert RGB to HSL (note this requires normalised RGB values).
analyse(img,[options]): convert HSL to rgb (plain {r,g,b}, using range [0,255]).

The defaults object can be set prior to running analyses, and currently supports the following properties:

neutrals: 10 - integer from 0 to 255, indicating the how close together {r,g,b} coordinates must be to be considered neutral
smoothing: 5 - used to smooth the hue spectrum when determining dominant hues. (value is distance from mean)
distance: 10 - minimum distance between recording two hues to end up recorded as major hues (value can range from 0 to 628)

The analyse function returns a two property object. The first is the "analysis" property, which houses:

rgb: A 3 component object with the histographical data for r, g and b.
RGB: A 3 component object with the histographical data for R, G,a nd B.
hsl: An object with the histographical data for h, and .dominant, a sorted array of {H,strength} major hues.
average: the weighted averages for r, g, b, R, G, B, and h.
maxima: the absolute maxima for r, g, b, R, G, B, and h.

The second is the "visualization" property, which houses image src data-uris for:

Some example images

As a demonstrator, the following images have all been run through the RGBAnalyser, using the following code: