Swing : Displaying Images

By now, you know how to create a frame, how to draw shapes, how to write out text and alter the fonts of the text. The last thing needed for us to start creating nice UI components, is our ability to display images. This is exactly what we are going to learn in this chapter.

So, lets get started!!!

Displaying Photos & Images:

Java Swings has a lot of nice features and one of them is the ability to display images on its components. You can select any image that is available in the local system or somewhere on the internet and display it on Graphics objects. As of Java SE 1.4, reading an image is very simple.

If the image is stored in a local file:

String filename = "...";

Image image = ImageIO.read(new File(filename));

Otherwise, you can supply a URL:

String urlname = "...";

Image image = ImageIO.read(new URL(urlname));

The read method throws an IOException if the image is not available.

Now the variable image contains a reference to an object that encapsulates the image data. You can display the image with the drawImage method of the Graphics class.

public void paintComponent(Graphics g)

{

. . .

g.drawImage(image, x, y, null);

}

Sometimes, you may want to tile an image across a components canvas if it is much smaller than the component size. We can do the tiling in the paintComponent method. We first draw one copy of the image in the top-left corner and then use the copyArea call to copy it into the entire window using the code below:

for (int i = 0; i * imageWidth <= getWidth(); i++)

for (int j = 0; j * imageHeight <= getHeight(); j++) 

 if (i + j > 0)

     g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);

Code Example:

Let us now take a look at a fully functional code example that displays as well as tiles an image.

Note: The image I am displaying is available in the My Pictures directory in my computer and you have to provide the correct path to any image that you wish to display. Otherwise only a blank frame will come up.

import java.awt.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;

public class DisplayImages
{
    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                MyImageFrame frame = new MyImageFrame();
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setVisible(true);
            }
        });
    }
}

/**
 * A frame with an image component
 */
class MyImageFrame extends JFrame
{
    public MyImageFrame()
    {
        setTitle("ImageTest");
        setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);

        // add component to frame

        MyImageComponent component = new MyImageComponent();
        add(component);
    }

    public static final int DEFAULT_WIDTH = 500;
    public static final int DEFAULT_HEIGHT = 500;
}

/**
 * A component that displays a tiled image
 */
class MyImageComponent extends JComponent
{
    public MyImageComponent()
    {
        // get the image
        try
        {
            image = ImageIO.read(new File("H:\\Personal\\My Pictures\\somepic.JPG"));
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }

    public void paintComponent(Graphics g)
    {
        if (image == null) return;

        int imageWidth = image.getWidth(this);
        int imageHeight = image.getHeight(this);

        // draw the image in the top-left corner
        g.drawImage(image, 0, 0, null);

        // tile the image across the component
        for (int i = 0; i * imageWidth <= getWidth(); i++) 
                for (int j = 0; j * imageHeight <= getHeight(); j++) 
                     if (i + j > 0) 
                      g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j
                * imageHeight);
    }

    private Image image;
}