[ka-Map-users] On IMAGECOLOR and ANTIALIAS

[Paul Spencer]

Pg,

when you use transparency alpha, mapserver generates 24 bit pngs with  
an alpha channel.  This is okay in most browsers, but unfortunately  
Internet Explorer cannot handle this type of image.  I am assuming  
that you are experiencing this problem with Internet Explorer and the  
rest of my comments are directed to solving this particular problem.   
If this isn't the case, please let me know.  I'm including a lengthy  
explanation of the problem and resolution 'for the record'.

Short Answer:

you probably need to include the following metadata in each of your  
layers

"imageformat" "alpha"

Long Answer (with technical explanation of the problem):

The 'standard' way of dealing with this problem in Internet Explorer  
is to use something called the PNG HACK.  png hack works by replacing  
the src of an image with a transparent gif and then using an activex  
control to load the png.  This works very well, but it is quite  
tricky to get exactly right.  All versions of this hack boil down to  
this solution.  Some use behaviours, some use css and javascript, and  
some use javascript.  All end up doing essentially the same thing.   
The common element amongst all of them is that the image must have an  
explicit size (which isn't a problem in the case of tiles at least).

I've distilled this hack down to its smallest, least intrusive  
working parts in ka-Map.  In screen.css, there is a CSS class:

/* img elements with a class of png24 will have the png24 filter hack  
applied
* in IE browsers only.  To make this work, images MUST have a width  
and height
* specified.  The minimum tag required is:
*
*     <img class="png24" src="<url>" width="xx" height="xx">
*/
img.png24 { filter:expression(applyPNGFilter(this)) }

This class means that an <img> tag with a class="png24" (or  
img.className = 'png24' in javascript) will get a filter.  Filter is  
a CSS style that only Internet Explorer understands.  In addition,  
Internet Explorer allows you to execute javascript inside a CSS  
style.  The result is that we can programmatically construct an  
appropriate filter for the image.  This is done inside the  
applyPNGFilter function found in startUp.js.

Conveniently, we can pass 'this' as an argument at it resolves to the  
actual image object.  The resulting function does the magic:

/*
*  applyPNGFilter(o)
*
*  Applies the PNG Filter Hack for IE browsers when showing 24bit PNG's
*
*  var o = object (this png element in the page)
*
* The filter is applied using a nifty feature of IE that allows  
javascript to
* be executed as part of a CSS style rule - this ensures that the  
hack only
* gets applied on IE browsers :)
*/
function applyPNGFilter(o) {
     var t="images/a_pixel.gif";
     if( o.src != t ) {
         var s=o.src;
         o.src = t;
         o.runtimeStyle.filter =  
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+s 
+"',sizingMethod='scale')";
     }
}

This should now work for any image in the browser.  Unfortunately, we  
couldn't get it to work for tiles since, for efficiency, we are  
constantly reusing img objects when zooming and panning.  IE just  
never seems to set the tile source correctly.  So in the case of  
tiles, we resorted to adding a property to tile images called  
ie_hack.  If this is true, then when a tile is loaded (as reported by  
the onload event of the image), its source is changed to be a  
transparent gif and the above code is executed (or something very  
like it).

The trick to getting all this to work is to ensure that ie_hack is  
set to true.  ie_hack is set IF the browser is internet explorer AND  
the layer has an imageformat AND the imageformat is alpha.

imageformat is set in init.php based on the mapfile imageformat type  
or a layer-specific meta data.  Unfortunately, if you don't set the  
layer metadata "imageformat" "alpha" then this will never work in IE  
because the mapfile imageformat will likely be PNG24.

Random Musings:

It seems to me now that I have worked through this in my head that we  
could make this work in the general case without requiring metadata  
just by using "imageformat" "alpha" if the mapfile image format is  
PNG24.  This could be combined with detecting if TRANSPARENCY ALPHA  
is set on the layer since it would be unnecessary to use the ie_hack  
otherwise.

If someone with IE is willing to try this, I'll commit the changes  
once you have it working

Cheers

Paul.


On 7-Jun-06, at 6:00 AM, Pg wrote:

> Another problem with colors and transparecis with PNG24.
> Ka-Map generates bad images, while the same map-file accessed as  
> WMS generates the correct image.
>
> My map file contains:
>
> IMAGECOLOR 254 254 253  (was "255 255 255": same problem)
> IMAGETYPE PNG24
>
> [...]
>
> LAYER
>   NAME nav_activepath
>   GROUP PERCORSI
>   TYPE LINE
>   STATUS OFF
>   [...]
>   TRANSPARENCY 100
>   CLASS
>     NAME "Anomalia"
>     EXPRESSION "t"
>     STYLE
>       COLOR 100 0 100
>       WIDTH 5
>       ANTIALIAS true
>     END
>   END
>   CLASS
>     NAME "Normale"
>     STYLE
>       COLOR 0 30 160
>       WIDTH 5
>       ANTIALIAS true
>     END
>   END
> END
>
> The image generated by mapserver (as WMS server) is correct (see  
> file WMS_Image.png).
> The image generated by tile.php the lines of the layer group  
> "PERCORSI" looks very strange (see file kamap_image.png). Also the  
> legend generated by ka-map present a similar problem (see  
> kamap_legend.png).
>
> If I remove the directive "ANTIALIAS true" from the style of the  
> layer, everithing is ok.
>
> Any idea?
>
>
>
>
>
>
> <WMS_Image.png>
> <kamap_image.png>
> <kamap_legend.png>
> _______________________________________________
> ka-Map-users mailing list
> ka-Map-users at lists.maptools.org
> http://lists.maptools.org/mailman/listinfo/ka-map-users

+-----------------------------------------------------------------+
|Paul Spencer                           pspencer at dmsolutions.ca   |
+-----------------------------------------------------------------+
|Applications & Software Development                              |
|DM Solutions Group Inc                 http://www.dmsolutions.ca/|
+-----------------------------------------------------------------+