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><canvaswidth=200height=120></canvas><scriptsrc="build/build.js"></script><script>varhistogram=require('histogram');varcanvas=document.querySelector('canvas');varimg=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