histogram-component

Image histograms

histogram

JavaScript image histograms with Canvas.

$ component install component/histogram

Or use without component:

$ component build --standalone histogram
<!DOCTYPE html>
<html>
<head>
  <title>Histogram</title>
  <style>
    .histogram {
      background: #1a1a1a;
      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>

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 {
  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;
  opacity: .4;
}
.histogram .red {
  color: #dc1e1a;
}
.histogram .green {
  color: #12b81c;
}
.histogram .blue {
  color: #46a3d6;
}

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

By default no smoothing is applied:

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

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

MIT