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
         myImageView.setImage(image);

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();
         imageView2.setImage(image);
         imageView2.setFitWidth(100);
         imageView2.setPreserveRatio(true);
         imageView2.setSmooth(true);
         imageView2.setCache(true);

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

          ImageView imageView3 = new ImageView();
         imageView3.setImage(image);
         Rectangle2D viewportRect = new Rectangle2D(40, 35, 110, 110);
         imageView3.setViewport(viewportRect);
         imageView3.setRotate(90);

Here’s the rest of the code:

          Group root = new Group();
         Scene scene = new Scene(root);
         scene.setFill(Color.BLACK);
         HBox box = new HBox();
         box.getChildren().add(myImageView);
         box.getChildren().add(imageView2);
         box.getChildren().add(imageView3);
         root.getChildren().add(box);

         stage.setTitle("ImageView");
         stage.setWidth(415);
         stage.setHeight(200);
         stage.setScene(scene);
         stage.sizeToScene();
         stage.show();
     }

     public static void main(String[] args) {
         Application.launch(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 java.io.File;
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 {

    @Override
    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));

        mFlowPane.getChildren().addAll(imageView);
        Scene scene = new Scene(mFlowPane, 500, 700);

        primaryStage.setTitle("JavaFX ImageView - Load From Hard Drive");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}