Issue
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);
}
}
Solution
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);
Answered By - c0der
Answer Checked By - Willingham (JavaFixing Volunteer)
