Introduction and Background
Displaying images on the screen is like writing the Hello World program for image processing amateurs. Here is an attempt to use WPF to display a rectangular grayscale raw image. This program enables the user to view a raw image file after specifying:
- Whether it is 8-bit or 16-bit, and
- Dimensions (width and height) of the image.
A raw image file is one which has just the pixel data arranged in a top down, left-to-right manner; it does not have any header. In the absence of a header, the above two pieces of information are needed to view the file. Since the dimensions of the image may be such that the corresponding image may not fit on the screen, we also provide scrollbars (if necessary) to scroll through the image. It is possible to display images using C# and .NET. Viewing images in WPF is inherently different from that in the C# world.
This small application is an extension to Displaying 16-bit Images Using C#. In that article, the C# language was used to display a raw image. Here, the same thing is achieved through WPF.
Description of the Image Display Code
The raw image file format is perhaps the simplest gray scale image file format. As we know, it doesn't contain any header, but directly contains the pixel values. So the user has to enter the width and height of the image.
The user interface is fairly simple and straightforward, with some Buttons and an Image control. DockPanel and StackPanel are used to arrange them neatly.
Since this is a raw image, the usual WPF methods for loading images cannot be used here. We need to read in the pixel values using a BinaryReader. Once the file is read, the number of pixels is computed based on the file size (and also whether it is an 8-bit image or 16-bit image). After this, an ImageDimensions dialog is invoked, prompting the user to enter the width and height of the image. This ImageDimensions dialog gives an initial guess for the width and height (for which it computes the factors), and allows the user to change them. Based on this, the image is created and then displayed. All of the above are enclosed in the code snippet given below.
private void DisplayImage16(string fileName)
{
try
{
BinaryReader br = new BinaryReader(File.Open(fileName, FileMode.Open));
ushort pixShort;
int i;
long iTotalSize = br.BaseStream.Length;
int iNumberOfPixels = (int)(iTotalSize / 2);
ID = new ImageDimensions(iNumberOfPixels);
if (ID.ShowDialog() == true)
{
width = Convert.ToInt32(ID.tbWidth.Text);
height = Convert.ToInt32(ID.tbHeight.Text);
canvas.Width = width;
canvas.Height = height;
img.Width = width;
img.Height = height;
pix16 = new ushort[iNumberOfPixels];
for (i = 0; i < iNumberOfPixels; ++i)
{
pixShort = (ushort)(br.ReadUInt16());
pix16[i] = pixShort;
}
br.Close();
int bitsPerPixel = 16;
stride = (width * bitsPerPixel + 7) / 8;
bmps = BitmapSource.Create(width, height, 96, 96,
PixelFormats.Gray16, null, pix16, stride);
img.Source = bmps;
bnSaveJPG.IsEnabled = true;
bnSavePNG.IsEnabled = true;
}
else
{
br.Close();
}
}
catch (Exception e)
{
MessageBox.Show(e.Message, "Error",
MessageBoxButton.OK, MessageBoxImage.Error);
}
}
A similar method is used for displaying 8-bit images. Saving these images as PNG or JPEG is a breeze with WPF - using PngBitmapEncoder and JpegBitmapEncoder, respectively.
The dialog for entering image dimensions is shown below:
In the attachments, there are two rectangular raw images of dimension 800 x 600, one each of 8-bit and 16-bit depth.
Closure
This completes the simple WPF application to display rectangular raw images. This can be extend to display other file formats like DICOM.
Acknowledgements
The authors would like to thank Nagesh Rao for testing the application.
History
- Version 1: 12 April 2010.
- Version 2: 27 April 2010.
