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:

histogram
a 256 x 256 combined rgb histogram
spectrum.histogram
a 360 x 200 hues histogram
spectrum.spectogram
a 360 x 50 spectrogram

Some example images

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