JavaFX ImageView

| Page Views: 293

JavaFX ImageView examples and tutorials.

JavaFX provides us with a class called ImageView, which as the name suggests is used to paint images. These images are loaded with the Image class. ImageView resides in the javafx.scene.image package.

ImageView is powerful and provides with abilities like:

  1. Resize the displayed image (with or without preserving the original aspect ratio).
  2. Specifying a viewport into the source image for restricting the pixels displayed by this ImageView.

Let's create an example to indicate how to render images into the ImageView class. First add the following import statements:

import javafx.application.Application;
 import javafx.geometry.Rectangle2D;
 import javafx.scene.Group;
 import javafx.scene.Scene;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
 import javafx.scene.paint.Color;
 import javafx.stage.Stage;

Then create a class. And let's make it extend the javafx.application.Application class.

 public class HelloMenu extends Application {

The Application is an abstract class that signifies the he entry point for JavaFX applications. Hence we have to override it's abstract method start():

     @Override public void start(Stage stage) {

That start() method, we said, is defined in the Application class and is the actual main entry point for all JavaFX applications. You can see it's receiving a Stage object. That object will be the primary stage for our JavaFX application. The JavaFX Stage class is the top level JavaFX container. The primary Stage is constructed by the platform.

Then we instantiate an image with our image:

         // load the image
         Image image = new Image("flower.png");

That will load our image into the Image object.

Then we instantiate the ImageView:

         ImageView myImageView = new ImageView();

Then we can set the image to the imageview using the setImage() method:

         // simple displays ImageView the image as is

We can then resizes the image to have width of 100 while preserving the ratio and using higher quality filtering method; this ImageView is also cached to improve performance

         ImageView imageView2 = new ImageView();

Then we can define a viewport into the source image (achieving a "zoom" effect) and display it rotated:

         ImageView imageView3 = new ImageView();
         Rectangle2D viewportRect = new Rectangle2D(40, 35, 110, 110);

Here's the rest of the code:

         Group root = new Group();
         Scene scene = new Scene(root);
         HBox box = new HBox();


     public static void main(String[] args) {

JavaFX ImageView Full Examples

1. How to Load Image From Hard Disk into JavaFX ImageView

Given it's a javafx application, we will start by deriving from the Application class. The we will override the start() method, in the process passing our primary stage into that method as a paramter.

We will create a file object, passing in the path to the image:

        File file = new File("D:\\Resources\\Imgs\\oclemy\\clemy.jpg");

Then we:

  1. obtain the URI of the file.
  2. then obtain the URL of that file from the URI
  3. and finally cast the URL to a string:
        String localUrl = file.toURI().toURL().toString();

    We will instantiate the Image class:

        Image image = new Image(localUrl,true);

    Then instantiate the ImageView, passing in the Image object.

        ImageView imageView = new ImageView(image);

    Here's the full code:

package mrimageview;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

 *Our MrImageView class.
 This class will extend the javafx.application.Application class.
public class MrImageView extends Application {

    public void start(Stage primaryStage) throws Exception {
        //Create a file object with the specified image path
        File file = new File("D:\\Resources\\Imgs\\oclemy\\clemy.jpg");
        //get file path
        String localUrl = file.toURI().toURL().toString();

        Image image = new Image(localUrl,true);
        ImageView imageView = new ImageView(image);

        FlowPane mFlowPane = new FlowPane();
        mFlowPane.setPadding(new Insets(20));

        Scene scene = new Scene(mFlowPane, 500, 700);

        primaryStage.setTitle("JavaFX ImageView - Load From Hard Drive");

     * Our main method
     * @param args the command line arguments
    public static void main(String[] args) {


How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.


What do You Think

Previous Post Next Post