Creating a Transparent Color Image

QUESTION: I'd like to know how to display color overlays on medical images. For example, an overlay of blood flow rate superimposed on gray-scale images of the brain. I'm not able to do this currently without destroying the information in the original image. What I would like is to make the color overlay "transparent" to some degree. How can I do this in IDL?

ANSWER: There are probably several ways to do this. But here is a quick and dirty method that has always worked quite well for me using direct graphic images.

The idea is to create a "half-tone" or "pixelated" image from the two images you want to overly, so that each adjacent pixel is from the other image. By creating two separate color tables, one a gray scale and the other anything you like, and scaling the original images appropriately into them, you can obtain a pixelated image that looks pretty close to what you are after.

Here is an example program, called Color_On_Gray, that uses the elevation.dat and ctscan.dat data sets in the IDL distribution to create the pixelated image. You can use your own images, or you can download the LoadData program from my web page if you want to use the program below.

Pro Color_On_Gray, image_1, image_2

   ; Get the data sets if needed.

IF N_Params() EQ 0 THEN BEGIN
   image_1 = Loaddata(7)
   image_2 = Loaddata(5)
ENDIF

   ; Undecomposed color.
   
IF (!D.Flags AND 256) NE 0 THEN Device, Decomposed=0

   ; Size the second image to fit the first.

s = Size(image_1, /Dimensions)
image_2 = Congrid(image_2, s[0], s[1], /Interp)

   ; Load the color tables. Gray-scale and red-temperature.

ncolors = !D.Table_Size
halfcolors = Byte(ncolors / 2)
LoadCT, 0, NColors=halfcolors
LoadCT, 3, NColors=halfcolors, Bottom=halfcolors

    ; Scale the data. Image_1 data uses gray-scale.

image_1 = Bytscl(image_1, Top=halfcolors-1)
image_2 = Bytscl(image_2, Top=halfcolors-1) + halfcolors

   ; Create a vector for pixelation.

x = Findgen(s[0]/2) * 2

   ; Pixelate the image.

image = BytArr(s[0], s[1])
image[x, *]   = image_1[x, *]
image[x+1, *] = image_2[x+1, *]
image[*, x]   = Shift(image[*, x], 1)

Window, XSize=s[0], YSize=s[1], /Free
TV, image

END

Here is an example of the output produced by the Color_On_Gray program above.

Example of gray-scale
image with transparent color overlay on top.

Color Transparency with Object Graphic Images

Another method I've used successfully is to use the alpha blending channel that is available with object graphic images to "combine" the colors of the two images I am trying to overlay. The trick here is to realize (the documentation is a little unclear on this point) that the foreground image must be a 24-bit color image if you want the image colors to show through. The background image can be either an 8-bit (2D) image with a palette, as in the example here, or a 24-bit (3D) image with the colors specified directly.

A blending function value of [3,4] will provide a nice see-through sort of look for the two images. The code for my foreground or alpha image will look like this:

   alphaImage = Obj_New('IDLgrImage', image24, $
      Dimensions=[400,400], Interleave=0,  Blend_Func=[3,4])

The example code is named Image_Blend. You can call it without parameters and it will use two of the images in the IDL distribution. Or, you can pass the program your own 2D images (they can be different sizes if you like):

   IDL> Image_Blend, backgroundImage, foregroundImage

The foreground image will be turned into a 24-bit image automatically by the program, using the color table you specify with the ColorTable keyword. (Color table 3, the Red Temperature color table will be used if you don't specify a preference.)

Pixels in the foreground image with a value of zero will all be set to totally transparent. Any other non-zero pixel will have its alpha channel value initially set to 128. This will make these pixels semi-transparent. A slider bar will allow you to change this value interactively. As you do, notice how the transparency of the foreground image changes.

Here is an example of how the program looks when it is running:

Color Transparency with 24-Bit Direct Graphic Images

If you have a 24-bit color display, you can do your own alpha blending in direct graphics. Mike Miller on the IDL newsgroup provided this formula:

   RGB = BYTE( alpha * FLOAT(baseRGB) + (1.0 - alpha) * FLOAT(overlayRGB) )

Where baseRGB and overlayRGB are 24-bit images and alpha is a number between 0 and 1 indicating the amount of alpha blending desired. If you have downloaded the programs from the Coyote Library, here is a example you can try:

   Window, Title='Direct Graphics Alpha Blending'
    LoadCT, 5
   TVImage, LoadData(7)
   a = TVRead()
   LoadCT, 0
   TVImage, (LoadData(5) GT 40) * 255B
   b = TVRead()
   alpha = 0.5
   rgb = BYTE( alpha * FLOAT(a) + (1.0 - alpha) * FLOAT(b) )
   TVImage, rgb

You can see the result in the figure below.

You will need the Coyote Library programs TVImage, TVRead, and LoadData to run the code above.

[Return to IDL Programming Tips]