Built with blockbuilder.org
forked from anonymous's block: Histogram Equalization
forked from biovisualize's block: Histogram Equalization
forked from anonymous's block: Histogram Equalization on a Map
Built with blockbuilder.org
forked from anonymous's block: Histogram Equalization
forked from biovisualize's block: Histogram Equalization
forked from anonymous's block: Histogram Equalization on a Map
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
canvas { width:50%; float: left} | |
</style> | |
</head> | |
<body> | |
<canvas id="imageOriginalCanvas"></canvas> | |
<canvas id="imageCanvas"></canvas> | |
<script> | |
var cnv = document.getElementById('imageCanvas'); | |
var ctx = cnv.getContext('2d'); | |
var cnvori = document.getElementById('imageOriginalCanvas'); | |
var ctxori = cnvori.getContext('2d'); | |
var colorBrewerSpectral11 = ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"].reverse(); | |
var colorScales = { | |
'linearBlackAndWhite': function(values){ | |
return d3.scale.linear() | |
.domain(d3.extent(values)) | |
.range(['#000', '#fff']); | |
}, | |
'histogramEqualize': function(values){ | |
var buckets = 100; | |
var quantiles = d3.scale.quantile() | |
.domain(values) | |
.range(d3.range(buckets)) | |
.quantiles(); | |
var stopCount = quantiles.length; | |
var linearScale = d3.scale.linear() | |
.domain([0, stopCount - 1]) | |
.range([d3.rgb('rgb(0, 0, 0)'), d3.rgb('rgb(255, 255, 255)')]); | |
var grayScale = d3.range(stopCount).map(function(d){ | |
return linearScale(d); | |
}); | |
return d3.scale.linear().domain(quantiles).range(grayScale); | |
}, | |
'histogramEqualizeColorBrewerSpectral11': function(values){ | |
var buckets = colorBrewerSpectral11.length; | |
var quantiles = d3.scale.quantile() | |
.domain(values) | |
.range(d3.range(buckets)) | |
.quantiles(); | |
return d3.scale.linear() | |
.domain(quantiles) | |
.range(colorBrewerSpectral11); | |
}, | |
}; | |
var img = new Image; | |
img.onload = function(){ | |
cnvori.width = cnv.width = img.width; | |
cnvori.height = cnv.height = img.height; | |
ctx.drawImage(img, 0, 0, img.width, img.height); | |
ctxori.drawImage(img, 0, 0, img.width, img.height); | |
var imgData = ctx.getImageData(0, 0, img.width, img.height); | |
var rasterData = []; | |
for(j = 0; j < (imgData.data.length / 4); j++){ | |
var brightness = d3.lab(d3.rgb(imgData.data[j * 4], | |
imgData.data[j * 4 + 1], | |
imgData.data[j * 4 + 2])).l; | |
rasterData.push(imgData.data[j * 4] === 0 ? null : brightness); | |
} | |
// var scale = colorScales.histogramEqualize(rasterData); | |
var scale = colorScales.histogramEqualizeColorBrewerSpectral11(rasterData); | |
for(j = 0; j < rasterData.length; j++){ | |
var scaledColor = scale(rasterData[j]); | |
var color = d3.rgb(scaledColor); | |
imgData.data[j * 4] = color.r; | |
imgData.data[j * 4 + 1] = color.g; | |
imgData.data[j * 4 + 2] = color.b; | |
// imgData.data[j * 4 + 3] = 255; | |
} | |
ctx.putImageData(imgData, 0, 0); | |
}; | |
img.crossOrigin = ''; | |
img.src = 'https://lh3.googleusercontent.com/-bOn4aarMiQY/VpfMqUx6MUI/AAAAAAAAC5I/IYmhHf9q8a0/s800-Ic42/linear_black_and_white_c.png'; | |
</script> | |
</body> |