ie6 - gd and php image outputting

Question

Hi guys, i'm trying to show image with grayscale-filter. Here is my code:

$images = glob('gallery/*small*');
shuffle($images);
array_splice($images, 3);

$imgHandles = array();
$imgBuffered = array();
for( $i = 0; $i < 3; $i++)
{  
   $imgHandles[$i] = imagecreatefromstring( file_get_contents($images[$i]) ); 
   imagefilter( $imgHandles[$i], IMG_FILTER_GRAYSCALE ); 

   ob_start();
   imagepng( $imgHandles[$i] ); 
   $imgBuffered[$i] = ob_get_contents();
   ob_end_clean();
   imagedestroy( $imgHandles[$i] ); 
}

And outputting:

for( $i = 0; $i < 3; $i++ )
{  
   echo "<a href=\"gallery.php\">
   <img class=\"photo\" src='data:image/png;base64,".base64_encode( $imgBuffered[$i] )."' /></a>";                                                                                    
}

In opera, ff, chrome, safari everything is fine, but ie6 doesn't show images. Why?

I made code like at page: http://dean.edwards.name/weblog/2005/06/base64-ie/ I see pictures, but in some seconds they hide... I really don't know why. Can you help me with this stuff?

Answer 1

The data URI scheme isn't supported in IE6 (nor IE7, apparently). You'll need to save the image somewhere and provide the URL to the saved image as the img src, or you'll need to generate it on the fly via a separate script and do something like img src="path/to/image_generator.php".

Answer 2

ceejayoz's approach is probably best, and he\she is correct in saying that the scheme isn't supported in IE6. Here is a page about how to do it in IE, but I hope you have a good reason for not doing the /path/to/image_generator.php version.

To do that, you would create a script that just does imagepng, for example, and then sends headers indicating to the browser that the image in question is a png. e.g.,

img_generate.php:

$images = glob('gallery/*small*');

$img_to_generate=intval($_GET['image_to_generate']);



$imgHandle = imagecreatefromstring( file_get_contents($images[$img_to_generate]) ); 
imagefilter( $imgHandle, IMG_FILTER_GRAYSCALE ); 

header('Content-type:image/png');//tell the browser what to expect
imagepng( $imgHandle ); //output the image
imagedestroy( $imgHandles ); //clean up

and then in your html

<img src="/path/to/img_generate.php?image_to_generate=0" alt="image 0" />
<img src="/path/to/img_generate.php?image_to_generate=1" alt="image 1" />
<img src="/path/to/img_generate.php?image_to_generate=2" alt="image 2" />