Lesson 11.3 Images

Painting Images

Now that you know how to paint geometric pictures and you've made the acquaintence of the Canvas and Component classes, it's time to move out of the cubist age and into the world of photorealism. Or surrealism if you prefer.

It's time to learn to paint images.

Using images in your Java program is a little different than using images in an HTML Web page. Like HTML, Java has built-in support for GIF or JPEG images, including animated GIFs. As with HTML, if you want to display TIFFs or BMPs, you'll have to translate them first.

With HTML, you can display an image in your Web page simply by using the image's URL in an img tag. Things are a little more complex in Java, but not much more.

To draw an image on your applet you must:

• First load the image into memory.
• Then draw the image using a Graphics object, just as you've drawn geometric shapes.

Java applications, as opposed to applets, have no such restriction. A Java application can display both local images [from files located on the machine running the application] and remote images, from any valid URL. You'll learn about building graphical Java applications in the next lesson.

Back to Top

Loading Images

To load an image in an applet, you first create an Image variable like this: 

Then you use the Applet getImage() method to retrieve the image from your Web server and load it into memory, like this: 

Notice that you don't use the new operator to construct an Image object.

The getImage() Method

Both methods return a "base" URL, that is, a URL that refers to a directory, not a file. The difference between the two methods is that the getCodeBase() method returns the directory containing your applet while getDocumentBase() returns the directory containing your HTML page. They are often the same, of course.

The second argument to getImage() is a String containing the name of the file containing the image you want to retreive. This String can contain relative path information if you like. Both of these are valid calls to getImage(): 

The first of these looks for myfile.gif in an images directory "on the same level" as the directory containing your applet. If your applet--named myapplet.class--was in a directory called applets, then myfile.gif would be found in a directory that looks like this: 

The second example looks for an image in a directory "below" the directory containing your applet. Given the same circumstances as the previous example, myapplet.class and myfile.gif would be contained in a directory structure like this:

Asynchronous Loading

Because of this, Java loads its images asynchronously. Rather than stopping the program and waiting for the image to arrive, getImage() works in the background to load your image while the rest of your program continues just as if getImage() were already finished.

There are several ways you can deal with this asynchronous image loading. We'll look at the simplest method in the next section.

Back to Top

Drawing Images

To draw an image, you use the Graphics drawImage() method. There are six different versions of drawImage(), but the simplest takes four arguments like this: 

The drawImage() method returns a boolean. If the image has completely arrived and could be painted successfully, then it returns true. Otherwise, drawImage() return false. If you put drawImage() in an if statement, you can tell it to repaint() until your image has completely arrived.

A Quick Example

Here are the steps to follow:

1. Obtain a GIF or JPG image which you want to display.
2. Create an applet named Image1.java.
3. Add an Image field to your applet and set it to null.
4. In your init() method, load the image by calling getImage().
5. Override the paint() method and call drawImage(), passing your Image object.
6. If drawImage() returns false, call repaint(), passing a suitable delay factor.

Here's my copy of the Image1 applet:

Back to Top

Other drawImage() Methods

Method 1: Coloring
Here's an example. The code: 

Method 2: Resizing
A third version of drawImage() lets you supply a width and height for the rendered image, as well as a position. The code:

int w  = getSize().width; int h = getSize().height; if (! g.drawImage(img, 0, 0, w, h, this))   repaint(100);

produces the image you see here:

Method 3: Transformation
A final version of drawImage() takes ten arguments like this: 

g.drawImage(img,                // Image             dx1, dy1, dx2, dy2, // Destination             sx1, sy1, sx2, sy2, // Source             this)

The first argument is an Image as before and the last argument is an ImageObserver [or this] as before.

The first four integer arguments, dx1, dy1, dx2, dy2 represent four points of the destination image. [This is unlike the previous version of drawImage() where the second two arguments are width and height, not a coordinate pair.] The second set of four integer arguments, sx1, sy1, sx2, sy2, represent the source image coordinates. The image rectangle represented by these coordinates is mapped to the destination image coordinates when the image is drawn. The code shown here:

displays the image shown below. Notice that the point 68,58 in the image is drawn at position 0, 0 in on your screen while the pixel at 0,0 in the image is drawn at 145,145 on your screen.

Back to Top

Image Size

You already know how to find out how big your Component is; you use getSize().width and getSize().height. The Image class has a pair of methods for retrieving similar information from your images:

The argument to getWidth() and getHeight() is an ImageObserver, just like with drawImage(). As with drawImage(), if you pass this, instead of null, you'll be notified as your image loads. Until the image is completely loaded, getWidth() and getHeight() return -1.

Image Copy

To use copyArea() you first define an area on the screen by specifying x, y, width, and height, and then another point to copy the image to. Here's an example:

Here's the result. [The Buttons don't do anything. They're just there to add "color"]. This seems to look OK in Navigator, but has some problems on IE where it doesn't finish repainting unless you reload the page.

Back to Top

Waiting for Images

There are two ways to do this:

• By overriding the imageUpdate() method in the class that loads your images.
• By using a MediaTracker object.

ImageObserver

The documentation for imageUpdate() is a little inscrutable, to say the least. Fortunately, if all you want to do is wait for an image to load, you can just add the imageUpdate() method to your code, exactly as it appears here:

ImageUpdate.java

import java.awt.*; import java.applet.*; public class ImageUpdate extends Applet {   Image img = null;   public void init()   {     img = getImage(getCodeBase(), "tux.gif");   }   public void paint(Graphics g)   {     g.drawImage(img, 0, 0, this);   }   public boolean imageUpdate(Image im,           int flags, int x,           int y, int w, int h)   {     if ((flags & ALLBITS) == 0)       return true;     repaint();     return false;   } }

When you add an imageUpdate() method to your program, make sure you remove the if statement in front of drawImage(), along with the repaint(), that you used previously to wait for your image to load. Just call drawImage() unconditionally in paint(), as shown above. As every chunk of image arrives at your computer, the updateImage() method is called. Inside the method you check if the entire image has arrived by testing the expression:

(flags & ALLBITS) == 0

If this expression is true, then the image has not yet loaded, and you immediately return true, asking the image producer to notify you when the next "chunk" of image has arrived. When this expression is false--meaning the entire image has arrived and is loaded in memory--you invoke the repaint() method and return false, telling the image producer that you no longer wish to be notified. By placing a System.out.println() inside your imageUpdate() method, you can watch this loading process as it proceeds. Here's what happens when you do that with the code shown above. Note that the image is loaded starting at the top, which you can watch by monitoring the increase in y. 

Back to Top

MediaTracker

Using a MediaTracker is a three-step process:

1. Create a MediaTracker object. To do this you call the single-argument MediaTracker constructor, passing this as the argument. Tell the MediaTracker to track your image loading, using the addImage(img, ID) method. The first argument is the Image object you want to monitor. The second is an arbitrary integer ID which you can use to identify the image you are tracking. If you want to wait for all of your images to load, then give them all the same ID. If you want to monitor each individually, give them separate ID numbers.
2. Use the MediaTracker monitoring methods inside a try-catch block, which catches InterruptedException. The methods you'll use are waitForAll() or waitForID(ID).

Here's another short example based on the Image1 applet:

Something to Talk About

Please continue to the next section of this lesson.

Back to Top