https://github.com/component/histogram

Create JavaScript image histograms with Canvas
https://github.com/component/histogram

Last synced: 25 days ago
JSON representation

Create JavaScript image histograms with Canvas

• Host: GitHub
• URL: https://github.com/component/histogram
• Owner: component
• Created: 2012-12-29T19:52:06.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2013-08-21T17:33:19.000Z (over 12 years ago)
• Last Synced: 2025-10-05T23:39:22.126Z (6 months ago)
• Language: JavaScript
• Homepage: http://component.github.com/histogram/
• Size: 3.97 MB
• Stars: 45
• Watchers: 6
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

          

# histogram

  JavaScript image histograms with Canvas.

  ![js histogram](http://cdn.dropmark.com/41933/195c6ba28e2bd32341350d1acb5a50d9b4b66b4d/main.png)

## Installation

    $ component install component/histogram

  Or use without component:

    $ component build --standalone histogram

## Example

```html

  Histogram

  

    .histogram {

      background: #1a1a1a;

    }

    .histogram .channel {

      opacity: .4;

    }

    .histogram .red {

      color: #dc1e1a;

    }

    .histogram .green {

      color: #12b81c;

    }

    .histogram .blue {

      color: #46a3d6;

    }

  

  

  

  

    var histogram = require('histogram');

    var canvas = document.querySelector('canvas');

    var img = document.createElement('img');

    img.src = 'your img here';

    histogram(img)

      .smooth(12)

      .draw(canvas);

  

```

## Styling

  By default the histogram will be completely black,

  for example the following has only an opacity applied:

  ![](http://cdn.dropmark.com/41933/4819d5cb323f839807bf2023969c5db875fecf9d/default-coloring.png)

  Using CSS you can style the canvas histogram however you like,

  for example the following CSS:

```css

.histogram .channel {

  opacity: .4;

}

.histogram .red {

  color: #dc1e1a;

}

.histogram .green {

  color: #12b81c;

}

.histogram .blue {

  color: #46a3d6;

}

```

 yields:

   ![](http://cdn.dropmark.com/41933/3232b5147111926d36e24270de1d441d43be6317/white.png)

 For the dark theme used in the first image on this page use:

```css

.histogram {

  background: #1a1a1a;

}

.histogram .channel {

  opacity: .4;

}

.histogram .red {

  color: #dc1e1a;

}

.histogram .green {

  color: #12b81c;

}

.histogram .blue {

  color: #46a3d6;

}

```

## Scaling

  The histogram's size will adjust to fit the canvas size, so use whatever dimensions you prefer:

  ![](http://cdn.dropmark.com/41933/1ebf9734bf5c09e8d4b986c0eca108fe47fee459/scaled.png)

## API

### .smooth([n])

  By default no smoothing is applied:

  ![no smoothing](http://cdn.dropmark.com/41933/24c9e31a80bc86ede792aaf1dbf3d144d4e30e60/no-smooth.png)

  When invoked without arguments (`.smooth()`) the

  default kernel of `6` is used:

  ![smoothing enabled](http://cdn.dropmark.com/41933/e4c31627d241db0b21e010eb72cdd853e4c9457d/smooth-default-6.png)

  You may also pass any kernel size you wish, here is `20` for

  example:

  ![larger kernel](http://cdn.dropmark.com/41933/6631116b859dc420ef3c532f241e1d77af8ddb3f/smooth-20.png)

## License

  MIT