【问题标题】:JavaFX - save canvas to png fileJavaFX - 将画布保存为 png 文件
【发布时间】:2021-11-18 02:37:23
【问题描述】:

我创建了一个简单的绘图程序,它基本上只是通过从 3 张图片中选择来在画布上打印图片,然后用户可以保存他创建的图像并打开以前的图像,该程序运行得非常好,但是我我面临一个问题:

  • 当我保存图像时,图像没有被保存为 png ,它是 而是保存为文件(虽然不确定),但即使它是 没有保存为 png ,图像被保存并且用户 可以打开它,它会在保存时打开。

代码如下:

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);
}
}

【问题讨论】:

  • @jewelsea 我保留了整个代码,以便一切都清楚
  • minimal reproducible example 请注意M! (f.i. 重做/撤消与按钮的视觉噱头无关) - 但一定要使其可重现
  • 我不太明白你的问题描述。我用两种不同的方式来解释它。 (1) 如果您的意思是文件名不以.png 结尾,那么请注意扩展名并不决定文件的格式。例如,您可能有一个扩展名为 .png 的文件,但在内部,字节实际上是 PDF。 (2) 如果您的意思是文件中的实际字节不是 PNG 格式 - 尽管不确定在这种情况下如何加载它 - 那么如果您使用 "png" 而不是 ".png"打电话给ImageIO.write?

标签: java javafx canvas png


【解决方案1】:

您尝试解决的问题的minimal reproducible example 可能很简单:

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);
    }
}

这使得隔离问题和帮助更容易。
要覆盖 PNG 文件,您只需使用 filechooder 选择它。
要创建一个新文件,您需要输入其名称其扩展名:name.png
您可以通过将ExtensionFilter 添加到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);

【讨论】:

    猜你喜欢
    • 2016-01-28
    • 1970-01-01
    • 2012-07-30
    • 1970-01-01
    • 2012-06-27
    • 2014-02-20
    • 2013-07-18
    • 2021-06-24
    • 1970-01-01
    相关资源
    最近更新 更多