Joining Images in ASP With csImageFile - Alpha channels

We have an example that adds a watermark to an image using ASP and our csImageFile component. In that example, the foreground image contains an alpha channel and it allows the background image to show through after joining. Sometimes the background image contains an alpha channel and the transparent area this defines must be transparent in the resulting composite image.

In this example we have a picture frame which adds a simple drop shadow to a photograph. The area outside the drop shadow is transparent, defined by an alpha channel. It is a PNG image. There is a rectangular area in the middle where the photograph will be added.

The two images used are shown below. Note that the frame image is a PNG containing an alpha channel. It is the area around the edge that is transparent. The black rectangle of the frame is the same size as the photograph.

ASP code to merge images with a resulting alpha channel


ASP component code joining images with alpha transparency


The merge operation that adds the photograph to the frame contains no transparency. If we use the standard merge functions provided by csImageFile, either MergeFront or MergeBack we will not get the desired result. Once the photograph is added to the frame, the frame will lose its transparency.

The solution is to make use of the options csImageFile provides to copy an alpha channel to a separate image and then copy it back later.

Example ASP Code

Set Image = Server.CreateObject("csImageFile.Manage")
Set Alpha = Server.CreateObject("csImageFile.Manage")

Image.ReadFile "c:\images\frame.png"
Alpha.BMPHandle = Image.AlphaHDC

Image.MergeBack "c:\images\photo.jpg", 11, 16
Image.AlphaHDC = Alpha.BMPHandle

Response.ContentType = "image/png"
Response.BinaryWrite Image.PNGData

ASP code to produce a partially transparent picture frame

Two instances of csImageFile are used. The first, Image, performs most of the operation. It loads the frame from disk, and merges this with the photograph, using the MergeBack command. This puts the current image to the back and the image specified as a file path is inserted over the top at the given coordinates.

The second instance, Alpha, is used to temporarily store the alpha channel from the frame image. While it is stored in the Alpha instance of csImageFile it is a 256 colour greyscale image. It uses one byte per pixel to measure the amount of transparency. After merging the two images the alpha channel is copied back again.

Support for alpha transparency has been introduced in version 6.2 of csImageFile and it is limited to PNG images. Additional functionality was added for version 6.4.7 to be able to extract, add or edit an alpha channel. We have another example where an alpha mask is created using csImageFile and then applied to a photograph.