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;
}
.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>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;
}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