Converting images loaded by imageryprovider into grayscale color

[kbvtq...@gmail.com]

Hi,
I am trying to convert images loaded by imageryprovider into grayscale color using the below pseudo codes. I would like to seek your advice if this is the right way or there are other better approach in terms of performance?

Also, if I need to toggle between viewing of map tiles in grayscale and original color, does that means I have to reconstruct the imageryprovider again?

Cesium.TileMapServiceImageryProvider.prototype.requestImage = function(x, y, level) {
var tt = Cesium.ImageryProvider.loadImage(this, url);
if (tt && grayscale) { // grayscale is a boolean flag
tt.then(function(image) {

var canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);

var imageData = context.getImageData(0, 0, 256, 256);
var data = imageData.data;

var v;
for (var i=0, n=data.length; i<n; i+=4) {
v = (data[i]+data[i+1]+data[i+2])/3;
data[i] = data[i+1] = data[i+2] = v;
}
context.putImageData(imageData, 0 ,0);
image.src = canvas.toDataURL();
}).otherwise(function(error) {
console.log(error);
});
}
return tt;
}

[Matthew Amato]

Unless you have very specific requirements for grayscale, you can just set layer.saturation to 0.  Here's a working example: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=8be35a3ad806d7847ce24c28c797c3c6

This will be infinitely faster than your above approach because it is hardware accelerated.

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[kbvtq...@gmail.com]

That works. Thanks Mathew.