histogram-component

Image histograms

npm install histogram-component
20 downloads in the last month

histogram

JavaScript image histograms with Canvas.

js histogram

Installation

$ component install component/histogram

Or use without component:

$ component build --standalone histogram

Example

<!DOCTYPE html>
<html>
<head>
  <title>Histogram</title>
  <style>
    .histogram {
      background: #1a1a1a;
    }
    .histogram .channel {
      opacity: .4;
    }
    .histogram .red {
      color: #dc1e1a;
    }
    .histogram .green {
      color: #12b81c;
    }
    .histogram .blue {
      color: #46a3d6;
    }
  </style>
</head>
<body>
  <canvas width=200 height=120></canvas>
  <script src="build/build.js"></script>

  <script>
    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);
  </script>
</body>
</html>

Styling

By default the histogram will be completely black, for example the following has only an opacity applied:

Using CSS you can style the canvas histogram however you like, for example the following CSS:

.histogram .channel {
  opacity: .4;
}
.histogram .red {
  color: #dc1e1a;
}
.histogram .green {
  color: #12b81c;
}
.histogram .blue {
  color: #46a3d6;
}

yields:

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

.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:

API

.smooth([n])

By default no smoothing is applied:

no smoothing

When invoked without arguments (.smooth()) the default kernel of 6 is used:

smoothing enabled

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

larger kernel

License

MIT

npm loves you