|
<!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> |