How to save an image snapshot of a Pane as a BMP?

Question

I have successfully managed to plot two graphs (BarChart and LineChart) on the same pane.

I am trying to implement a save button, which when clicked, writes the resultant image (with axes) to a bmp image of my saved choice.

The code runs and I get an affirmative alert and an image file is created. However, the resultant image file is empty (0 bytes).

@FXML // fx:id="graph"
    private Pane graph; // Value injected by FXMLLoader

@FXML // fx:id="saveButton"
    private Button saveButton; // Value injected by FXMLLoader

// ...

@FXML
    void clickSave(ActionEvent event) {
        Stage yourStage = (Stage) saveButton.getScene().getWindow();

        FileChooser fileChooser = new FileChooser();
        fileChooser.setInitialDirectory(new File("Path\\With\\Spaces"));
        fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter("BMP Files", "*.bmp"));

        // Show save dialog
        File file = fileChooser.showSaveDialog(yourStage);

        if (file != null) {
            if (!file.exists()) {
                try {
                    Files.createFile(file.toPath());
                } catch (IOException e) {
                    e.printStackTrace(); // Handle the exception
                }
            }

            WritableImage writableImage = graph.snapshot(new SnapshotParameters(), null);
            BufferedImage bufferedImage = SwingFXUtils.fromFXImage(writableImage, null);

            try {
                ImageIO.write(bufferedImage, "BMP", file);

                // Inform the user about the successful save
                Alert alert = new Alert(Alert.AlertType.INFORMATION);
                alert.setTitle("File Saved");
                alert.setHeaderText(null);
                alert.setContentText("The file has been saved successfully.");
                alert.showAndWait();
            } catch (IOException e) {
                e.printStackTrace();

                // Inform the user about the error
                Alert alert = new Alert(Alert.AlertType.ERROR);
                alert.setTitle("Error");
                alert.setHeaderText(null);
                alert.setContentText("An error occurred while saving the file.");
                alert.showAndWait();
            }
        }
    }

Edit: Following @James_D's commented advice, I changed the code to the following, but the problem persists.

@FXML
    void clickSave(ActionEvent event) {
        Stage stage = (Stage) saveButton.getScene().getWindow();

        FileChooser fileChooser = new FileChooser();
        fileChooser.setInitialDirectory(new File("Path\\With\\Spaces"));
        fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter("BMP Files", "*.bmp"));

        // Show save dialog
        File file = fileChooser.showSaveDialog(stage);

        if (file != null) {
            WritableImage writableImage = graph.snapshot(new SnapshotParameters(), null);
            BufferedImage bufferedImage = SwingFXUtils.fromFXImage(writableImage, null);

            try {
                ImageIO.write(bufferedImage, "BMP", file);

                if (!file.exists()) {
                    Files.createFile(file.toPath());
                }

                // Inform the user about the successful save
                Alert alert = new Alert(Alert.AlertType.INFORMATION);
                alert.setTitle("File Saved");
                alert.setHeaderText(null);
                alert.setContentText("The file has been saved successfully.");
                alert.showAndWait();
            } catch (IOException e) {
                e.printStackTrace();

                // Inform the user about the error
                Alert alert = new Alert(Alert.AlertType.ERROR);
                alert.setTitle("Error");
                alert.setHeaderText(null);
                alert.setContentText("An error occurred while saving the file.");
                alert.showAndWait();
            }
        }
    }

Answer 1

The Problem

The ImageIO::write method will return false:

if no appropriate writer is found

No exception is thrown in this case.

According to the ImageIO.write bmp does not work Q&A, the built-in BMP image writer requires the type of the image to be TYPE_INT_RGB. If the BufferedImage does not have that type, then the call to write will fail to find an "appropriate writer" and will return false, meaning no image was written to the file.

Looking at the implementation of SwingFXUtils::fromFXImage, the type of the returned image depends on the format of the source image and whether or not you passed in your own BufferedImage. From some experiementation, it looks like the type will be TYPE_INT_ARGB_PRE for JavaFX images created by taking a snapshot of a node. Unfortunately, that is the wrong type, hence no image is being written to the file in your case. But since you do not check the return value, you are erroneously reporting success to the user.

---

Solution

To solve the problem, you need to force the BufferedImage to have a type of TYPE_INT_RGB. Here are three different approaches.

Pre-create BufferedImage with needed type

If you can guarantee the JavaFX Image will be opaque, which I am not sure of regarding snapshots, then arguably the simplest way to do this is to pass your own pre-created BufferedImage. For example:

public static BufferedImage toBufferedImageRGB(Image fxImage) {
  if (fxImage.getPixelReader() == null) {
    throw new IllegalArgumentException("fxImage is not readable");
  }

  int width = (int) fxImage.getWidth();
  int height = (int) fxImage.getHeight();
  var target = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

  var awtImage = SwingFXUtils.fromFXImage(fxImage, target);
  if (awtImage.getType() != BufferedImage.TYPE_INT_RGB) {
    throw new RuntimeException("fxImage could not be converted to TYPE_INT_RGB");
  }
  return awtImage;
}

Manually copy pixel data

You can manually copy the pixels from the PixelReader to a BufferedImage. For example:

public static BufferedImage toBufferedImageRGB(Image fxImage) {
  var reader = fxImage.getPixelReader();
  if (reader == null) {
    throw new IllegalArgumentException("fxImage is not readable");
  }

  int w = (int) fxImage.getWidth();
  int h = (int) fxImage.getHeight();

  var awtImage = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
  for (int x = 0; x < w; x++) {
    for (int y = 0; y < h; y++) {
      awtImage.setRGB(x, y, reader.getArgb(x, y));
    }
  }

  return awtImage;
}

It should be okay that the pixels are read as ARGB, as the alpha channel is simply "lost" when writing to the BufferedImage in this case.

Copy BufferedImage to a new BufferedImage with the needed type

This approach is based on this answer to ImageIO.write bmp does not work.

public static BufferedImage toBufferedImageRGB(Image fxImage) {
  if (fxImage.getPixelReader() == null) {
    throw new IllegalArgumentException("fxImage is not readable");
  }

  var awtImage = SwingFXUtils.fromFXImage(fxImage, null);
  if (awtImage.getType() != BufferedImage.TYPE_INT_RGB) {
    int width = awtImage.getWidth();
    int height = awtImage.getHeight();
    var copy = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

    var graphics = copy.createGraphics();
    graphics.drawImage(awtImage, 0, 0, java.awt.Color.WHITE, null);
    graphics.dispose();
    awtImage = copy;
  }
  return awtImage;
}

---

Additional Notes

• There is no reason to manually create the file if it does not already exist. The file will be created as part of the process of writing out the image. And if the file does already exist, then it will be overwritten.

• You should not perform I/O work on the JavaFX Application Thread. All the work after obtaining the snapshot, including converting it to a BufferedImage, can and should be done on a background thread. Then react to the background work completing, whether normally or exceptionally, back on the JavaFX Application Thread (this is where you'd display the alerts, reenable controls, etc.).

  See Concurrency in JavaFX and the javafx.concurrent package for more information. The javafx.concurrent.Task class would be particularly suited for this scenario.

• From comments by jewelsea:

  It isn't your primary issue here [...], but it is good to be aware that when calling snapshot on a chart, often you want to set animate in the chart to false so that the snapshot will capture the final state of a chart rather than a state before the animation of changes to the chart has been completed.

  And:

  The snapshot documentation mentions: "When taking a snapshot of a scene that is being animated, either explicitly by the application or implicitly (such as chart animation), the snapshot will be rendered based on the state of the scene graph at the moment the snapshot is taken and will not reflect any subsequent animation changes."

Answer 2

Thank you very much to @Slaw and this answer.

The SwingFXUtils function return an image of type TYPE_INT_ARGB_PRE. Only images of type TYPE_INT_RGB can be written to a .bmp file, otherwise ImageIO.write(bufferedImage, "BMP", file); returns false. Therefore, an appropriate conversion from TYPE_INT_ARGB_PRE to TYPE_INT_RGB had to be done. The block below shows the updated code of interest, which now includes the conversion.

WritableImage writableImage = graph.snapshot(new SnapshotParameters(), null);
BufferedImage preBufferedImage = SwingFXUtils.fromFXImage(writableImage, null);

BufferedImage bufferedImage = new BufferedImage(
        preBufferedImage.getWidth(),
        preBufferedImage.getHeight(),
        BufferedImage.TYPE_INT_RGB
);
bufferedImage.createGraphics().drawImage(
        preBufferedImage,
        0,
        0,
        java.awt.Color.WHITE,
        null
);

try {
    Boolean __ = ImageIO.write(bufferedImage, "BMP", file);

    if (!file.exists()) {
        Files.createFile(file.toPath());
    }
    ...
}