Hi Luis,<div><br></div><div>Depending of you can use some html5 functionality, you can use client side code by using the "getCanvasContext()" method.</div><div><br></div><div>I can't remember where I got this from, but this will go through all the pixels of the osm layer I'm pulling in and greyscale them:</div>
<div><br></div><div><div>var osmGS = new OpenLayers.Layer.OSM('OSM GreyScale - Client', null, {</div><div>    eventListeners: {</div><div>        tileloaded: function (evt) {</div><div>            var ctx = evt.tile.getCanvasContext();</div>
<div>            if (ctx) {</div><div>                var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);</div><div>                var pix = imgd.data;</div><div>                for (var i = 0, n = pix.length; i < n; i += 4) {</div>
<div>                    pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;</div><div>                }</div><div>                ctx.putImageData(imgd, 0, 0);</div><div>                evt.tile.imgDiv.removeAttribute("crossorigin");</div>
<div>                evt.tile.imgDiv.src = ctx.canvas.toDataURL();</div><div>            }</div><div>        }</div><div>    }</div><div>});</div></div><div><br></div><div>I adapted the above because I wanted to get rid of black areas around aerial photography, and the below does that:</div>
<div><br></div><div><div>  tileloaded: function (evt) {</div><div>            var ctx = evt.tile.getCanvasContext();</div><div>            if (ctx) {</div><div>                var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);</div>
<div>                var pix = imgd.data;</div><div>                </div><div>                for (var i = 0, n = pix.length; i < n; i += 4) {</div><div>                //    pix[i] = pix[i + 1] = pix[i + 2] = (3 * pix[i] + 4 * pix[i + 1] + pix[i + 2]) / 8;</div>
<div>                 if((pix[i] + pix[i + 1] + pix[i + 2]) < 1){</div><div>                   // pix[i] = pix[i + 1] = pix[i + 2] = 255;</div><div>                    pix[i+3]=0;</div><div>                }</div><div>
                }</div><div>                ctx.putImageData(imgd, 0, 0);</div><div>                evt.tile.imgDiv.removeAttribute("crossorigin");</div><div>                evt.tile.imgDiv.src = ctx.canvas.toDataURL();</div>
<div>            }</div><div>        }</div></div><div><br></div><div><br></div><div>Regards,</div><div><br></div><div>Toby</div><div><br></div><div><br></div><div><br><div class="gmail_quote">On 4 October 2012 12:29, Luís de Sousa <span dir="ltr"><<a href="mailto:luis.a.de.sousa@gmail.com" target="_blank">luis.a.de.sousa@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Thank you vGIS and Tom for the replies.<br>
<br>
Changing the style server side would be technically possible, but it<br>
probably wouldn't allow for the kind of interactive user interface we are<br>
aim at (the user expects to see changes reflected in the map immediatly<br>
after toggling the threshold value).<br>
<br>
Pixastic could work indeed, but I see a good deal of work ahead me. Thanks<br>
in any case for the clues.<br>
<br>
Luís<br>
<br>
<br>
<br>
--<br>
View this message in context: <a href="http://osgeo-org.1560.n6.nabble.com/Dynamic-styling-of-raster-data-tp5006345p5006376.html" target="_blank">http://osgeo-org.1560.n6.nabble.com/Dynamic-styling-of-raster-data-tp5006345p5006376.html</a><br>

<div class="HOEnZb"><div class="h5">Sent from the OpenLayers Users mailing list archive at Nabble.com.<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@lists.osgeo.org">Users@lists.osgeo.org</a><br>
<a href="http://lists.osgeo.org/mailman/listinfo/openlayers-users" target="_blank">http://lists.osgeo.org/mailman/listinfo/openlayers-users</a><br>
</div></div></blockquote></div><br></div>