How to view images in Java

This is an article on viewing images in Java where I’ll take you through the steps of creating a viewer. This will give you a very basic Java Viewer you can use to view images. The tutorial is based on our Java Image Viewer that you will need our JDeli jar downloaded to use the JDeli viewer, why not go check it out!

Creating the class

To create a simple viewer we will need to have a menu, a file selector and a window to view the image.

First, we will start by creating a class called Viewer that extends JFrame and a method run that will be called from the constructor.

public class Viewer extends JFrame {

  int screenWidth = Toolkit.getDefaultToolkit().getScreenSize().width;
  int screenHeight = Toolkit.getDefaultToolkit().getScreenSize().height;

  public Viewer() {
    setTitle("Image Viewer");
    run();
  }

  private void run() {
    setSize(screenWidth - 100, screenHeight - 100);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  }

We have used Java.awt.ToolKit class to get the width and height of the screen. These will be used to set the frame size as well as the image size later on. I have set my viewer name to “Image Viewer” but feel free to change the name.

I have chosen to have a larger viewer by subtracting 100 from the width and height of the screen, but you can play around with what size you may want.

Adding the panel for displaying the image

Now that we have a frame we will want to add a Panel and a label, this will be where the image is displayed. You’ll want to put the Image label in a scroll pane so that you can scroll the image up and down. This can be done by adding the following to the run method:

JLabel imageLabel = new JLabel();
imageLabel.setBounds(0, 0, getWidth() - 200, getHeight() - 200);
final JScrollPane scrollPane = new JScrollPane(imageLabel);
JPanel window = new JPanel();
//We have also set the window layout to borderlayout
// but you can choose any layout you'd like. 
window.setLayout(new BorderLayout());
window.add(scrollPane, BorderLayout.CENTER);
// add the JPanel window to the JFrame
add(window);
addMenu();
setVisible(true);

I have set the image label bounds to the screen width and height minus 200 but you can change these values to how large or small you want to image to be.

Adding the menu

As you can see we call the addMenu() method above, we will need to create this method to be able to open files.
Create the JMenuItem open as a global variable as we will need to use this later on.

JMenuItem open = new JMenuItem("Open");

private void addMenu() {
  JMenuBar menuBar = new JMenuBar();
  JMenu fileMenu = new JMenu("File");
  open.addActionListener(this);
  fileMenu.add(open);
  menuBar.add(fileMenu);
  setJMenuBar(menuBar);
}

Here we create our menu bar and items and add them in and set the JMenuBar for the frame.

Adding functionality to the menu

For this, we want to ensure that the Viewer class implements ActionListener. This is so we can open a file when the menu item is clicked. Therefore we will need to override this method:

@Override
public void actionPerformed(ActionEvent e) {
  if (e.getsource() == open) {
    try {
      openFile();
    } catch (IOException ex) {
      throw new RuntimeException(ex);
    }
  }
}

Finally, we will then need to make the openFile method that is being called above. This method will open a file chooser and use the file selected to set the icon in the imageLabel variable.

private void openFile() throws IOException {
  final FileDialog fileChooser = new FileDialog((Frame) null, "File chooser");
  fileChooser.setMode(FileDialog.LOAD);
  fileChooser.setVisible(true);
// Ensure a file is chosen
  if (fileChooser.getDirectory() != null && fileChooser.getFile() != null) {
    File file = new File(fileChooser.getDirectory() + fileChooser.getFile());
// You will need JDeli jar for this line
    BufferedImage image = JDeli.read(file);
    final int imageWidth = image.getWidth(); // image width
    final int imageHeight = image.getHeight(); // image height

    //Here we need to make sure the image fits in the window
    final float adjustment;
    if (imageWidth > imageHeight) {
      adjustment = 1 / (imageWidth / (float) (screenWidth - 200));
    } else {
      adjustment = 1 / (imageHeight / (float) (screenHeight - 200));
    }
    imageLabel.setIcon(new ImageIcon(image.getScaledInstance((int)(imageWidth * adjustment),
    (int)(imageHeight * adjustment), Image.SCALE_SMOOTH)));
  }
}

Now when we run the code we should hopefully have something that looks like this:

Next steps

Once you have images displaying, this is just the start. It is very easy to add processing features, annotations and special effects. If you check out our Java image viewer you will see lots of ideas! If you have any cool suggestions, please do post your ideas and I may well write a follow-up.