[OpenLayers-Users] Applying filters to WMS-C images

[Laurent BAEY]

Hi,

I want to be able to use filters on images from a WMS-C layer (e.g.
grayscale filter) and I want it cross browser.

For now, I use this css properties, with a class I add on the tileloaded
event :

/* Chrome 19+ */
-webkit-filter: grayscale(1);
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"
filter: 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
filter: gray();
/* FF 3.5+ */
filter: url("./resources.svg#desaturate");

with resources.svg as follow :

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

This svg filter doen't work on images with chrome < 19 and safari, it
needs to be an <image> svg element to work.

Has anybody managed to display a WMS layer in a svg <image> element ? Or
maybe grayscale images with any other method ?

Note that I can't use the canvas method with the OL 2.11 version I have to
use. (tile.getCanvasContext() doesn't exist)

Thanks

Laurent