JavaFX – save canvas to png file

I’ve created a simple drawing program which just basically prints pictures on a canvas by choosing from 3 pictures and then the user can save the image that he created and open a previous image , the program works perfectly good , but I’m facing a problem :

• when I save the image , the image is not being saved as a png ,it’s rather getting saved as a file (not sure though) but even when it’s not being saved as a png , the image is getting saved and the user can open it and it opens as it was saved.

Here’s the code :

package sample;
import java.awt.image.RenderedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.Stack;

import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.geometry.Insets;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Shape;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
import javax.imageio.ImageIO;

public class Main extends Application {

@Override
public void start(Stage primaryStage) {

    Stack<Shape> undoHistory = new Stack();
    Stack<Shape> redoHistory = new Stack();

    Image image1 = new 
  Image("C:\Users\Mhamd\Desktop\stickers\src\resources\imgbin_clicker-stickers- 
  telegram- 
  decal-vkontakte-png.png",100,100,false,false);
    Image image2 = new 
  Image("C:\Users\Mhamd\Desktop\stickers\src\resources\favpng_sticker-decal-telegram- 
  emoticon-adhesive.png",100,100,false,false);
    Image image3 = new 
  Image("C:\Users\Mhamd\Desktop\stickers\src\resources\favpng_donald-duck-telegram- 
  sticker.png",100,100,false,false);
    ImageView view1 = new ImageView(image1);
    view1.setFitHeight(80);
    view1.setPreserveRatio(true);
    ImageView view2 = new ImageView(image2);
    view2.setFitHeight(80);
    view2.setPreserveRatio(true);
    ImageView view3 = new ImageView(image3);
    view3.setFitHeight(80);
    view3.setPreserveRatio(true);

    /* ----------btns---------- */
    ToggleButton button1 = new ToggleButton();
    ToggleButton button2 = new ToggleButton();
    ToggleButton button3 = new ToggleButton();

    button1.setGraphic(view1);
    button2.setGraphic(view2);
    button3.setGraphic(view3);

    ToggleButton[] toolsArr = {button1, button2, button3};

    ToggleGroup tools = new ToggleGroup();

    for (ToggleButton tool : toolsArr) {
        tool.setMinWidth(90);
        tool.setToggleGroup(tools);
        tool.setCursor(Cursor.HAND);
    }


    Button undo = new Button("Undo");
    Button redo = new Button("Redo");
    Button save = new Button("Save");
    Button open = new Button("Open");
    Button createNew = new Button("Create New");

    Button[] basicArr = {save, open,createNew,undo,redo};

    for(Button btn : basicArr) {
        btn.setMinWidth(90);
        btn.setCursor(Cursor.HAND);
        btn.setTextFill(Color.WHITE);
        btn.setStyle("-fx-background-color: #666;");
    }
    save.setStyle("-fx-background-color: #80334d;");
    open.setStyle("-fx-background-color: #80334d;");
    createNew.setStyle("-fx-background-color: #80334d;");
    undo.setStyle("-fx-background-color: #80334d;");
    redo.setStyle("-fx-background-color: #80334d;");

    VBox btns = new VBox(10);
    btns.getChildren().addAll(button1, button2, button3, open, save,createNew,undo,redo);
    btns.setPadding(new Insets(5));
    btns.setStyle("-fx-background-color: #999");
    btns.setPrefWidth(100);

    /* ----------Draw Canvas---------- */
    Canvas canvas = new Canvas(1080, 790);
    GraphicsContext gc;
    gc = canvas.getGraphicsContext2D();
    gc.setLineWidth(1);

    canvas.setOnMouseClicked(e->{
        if(button1.isSelected()) {
            gc.drawImage(image1, e.getX(), e.getY());
        }
        else if(button2.isSelected()) {
            gc.drawImage(image2,e.getX(), e.getY());
        }
        else if(button3.isSelected()) {
            gc.drawImage(image3,e.getX(), e.getY());
        }
    });

    /*------- Create New Paint ------*/
    //Create
    createNew.setOnAction((e) ->{
        gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
    });

    /*------- Save & Open ------*/
    // Open
    open.setOnAction((e)->{
        FileChooser openFile = new FileChooser();
        openFile.setTitle("Open File");
        File file = openFile.showOpenDialog(primaryStage);
        if (file != null) {
            try {
                InputStream io = new FileInputStream(file);
                Image img = new Image(io);
                gc.drawImage(img, 0, 0);
            } catch (IOException ex) {
                System.out.println("Error!");
            }
        }
    });

    // Save
    save.setOnAction((e)->{
        FileChooser savefile = new FileChooser();
        savefile.setTitle("Save File");

        File file = savefile.showSaveDialog(primaryStage);
        if (file != null) {
            try {
                WritableImage writableImage = new WritableImage(1080, 790);
                canvas.snapshot(null, writableImage);
                RenderedImage renderedImage = SwingFXUtils.fromFXImage(writableImage, null);
                ImageIO.write(renderedImage, ".png", file);
            } catch (IOException ex) {
                System.out.println("Error!");
            }
        }

    });

    /* ----------UNDO & REDO---------- */


    /* ----------STAGE & SCENE---------- */
    BorderPane pane = new BorderPane();
    pane.setLeft(btns);
    pane.setCenter(canvas);

    Scene scene = new Scene(pane, 1200, 800);

    primaryStage.setTitle("Stickers");
    primaryStage.setScene(scene);
    primaryStage.show();
}

public static void main(String[] args) {
    launch(args);
}
}

Answer

A minimal reproducible example of the problem you are trying to solve could be as simple as :

import java.awt.image.RenderedImage;
import java.io.*;
import javax.imageio.ImageIO;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.FileChooser;
import javafx.stage.Stage;

public class Main extends Application {

    private static final int CANVAS_SIZE = 200;
    private static final String FISH_IMAGE = "https://www.shareicon.net/data/128x128/2015/03/28/14104_animal_256x256.png";
    @Override
    public void start(Stage primaryStage) {

        Image image = new Image(FISH_IMAGE,100,100,false,false);
        Button save = new Button("Save");
        VBox btns = new VBox(save);

        /* ----------Draw Canvas---------- */
        Canvas canvas = new Canvas(CANVAS_SIZE, CANVAS_SIZE);
        GraphicsContext gc  = canvas.getGraphicsContext2D();
        gc.drawImage(image, 50, 50);

        // Save
        save.setOnAction((e)->{
            FileChooser savefile = new FileChooser();
            savefile.setTitle("Save File");

            File file = savefile.showSaveDialog(primaryStage);
            System.out.println("is file null ? "+ file);
            if (file != null) {
                try {
                    WritableImage writableImage = new WritableImage(CANVAS_SIZE, CANVAS_SIZE);
                    canvas.snapshot(null, writableImage);
                    RenderedImage renderedImage = SwingFXUtils.fromFXImage(writableImage, null);
                    ImageIO.write(renderedImage, "png", file);
                } catch (IOException ex) {
                    ex.printStackTrace();
                    System.out.println("Error!");
                }
            }
        });

        BorderPane pane = new BorderPane();
        pane.setLeft(btns);
        pane.setCenter(canvas);

        Scene scene = new Scene(pane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

This makes isolatng the problem and helping way easier.
To overwrite a PNG file you only have to select it with the filechooder.
To create a new file you need to type its name and its extension: name.png
You can have the extension applied automatically by adding an ExtensionFilter to the FileChooser

FileChooser savefile = new FileChooser();
savefile.setTitle("Save File");
// Set extension filter
FileChooser.ExtensionFilter extFilter = new FileChooser.ExtensionFilter("PNG files", "*.PNG");
savefile.getExtensionFilters().add(extFilter);