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:

All images (c) Mike "Pomax" Kamermans, hit up Flickr for additional information (and more photographs).