© copyright 18.Jan.2004 by Paul Bradley filed under PHP
Recently we had an estate agent client, who wanted the property photographs on their web site to be dimmed when the database record had been updated to indicate that the property was under offer. Reducing the opacity of an image within PHP can be achieved by using the graphic functions of the GD2 library, in particular the ImageCopyMerge function.
The results will depend largely on the image quality of the original photograph, however on the tests we did the visual effect was sufficient. Below is an example of the results; with the original on the left (For Sale) and the PHP altered image on the right (Under Offer).
For Sale |
Under Offer |
![]() |
![]() |
Our script was intended to be used from an image tag :-
<img src="image.php?id=X">
Where X is the property reference number; this would be used to check the database and determine the status of the property, establishing if the original image needed the opacity filter applied.
The first line of the script outputs the correct HTTP header to tell the browser to expect an image; in this example a JPEG file.
header ("Content-type: image/jpeg");
Next we assign the filename of the original image file, and load the image into the variable $img_src.
$filename = sample.jpg;
$img_src = ImageCreateFromJpeg ($filename);
Using the getimagesize function, we can find out the images height and width. The getimagesize function returns an array with 4 elements. The first two indexes of the array are the ones we are interested in. Index 0 contains the width of the image, and Index 1 contains the height.
$size = getimagesize($filename);
Next we create a copy of the image for the destination file, which will be the file we return to the browser. The reason we load a copy of the original image again, via the ImageCreateFromJpeg function, is so that the destination image handle is set to the correct size and has the same colour palette as the original.
$img_des = ImageCreateFromJpeg ($filename);
We then need to flood fill the destination image with a white foreground before performing the copy merge. Using the ImageColorAllocate function we create a colour identifier representing the colour white by passing in the RGB components for white.
$white = ImageColorAllocate($img_des, 255, 255, 255);
ImageFilledRectangle($img_des, 0, 0, $size[0], $size[1], $white);
Now that everything is set-up we can copy the original image to the destination image applying the opacity reduction. To produce the result shown above, we used an opacity value of 25. Valid numbers are from 1 to 100, the lower the value the lighter the resulting image will appear.
The function which does all the real work is ImageCopyMerge; which takes nine parameters :-
Please note that an x,y value of 0,0 is the top left corner of the image.
$opacity = 25;
ImageCopyMerge($img_des, $img_src, 0, 0, 0, 0,
$size[0], $size[1], $opacity);
The final step is to output the destination image to the browser and unset the image handle variables, releasing the memory.
ImageJPEG ($img_des);
ImageDestroy ($img_src);
ImageDestroy ($img_des);
About the Author
Paul Bradley is a VB.NET software developer living and working in Cumbria. He provides PHP & MySQL bespoke development services via his software development company, Carlisle Software Limited.
He has over 20 years programming experience.