How do I render the image with a better quality?
The node is a Pane with the css:
.imagePane { -fx-background-repeat: no-repeat; -fx-background-image: url('../../img/logo/icon_white.png'); -fx-background-size: cover; } Image inside the application:
Default Image: 
3 Answers
Answers 1
I would recommend you to try to initialize a Background in the Java code. You can set the background into a pane.
Pane#setBackground(background); if you initialize a Background you would first initialize a BackgroundImage and a BackgroundImage needs an Image. In the constructor of the image you can define the requestedWith and requestedHeight. These are the properties in which resolution the files should be loaded. The final code could look like this.
pane.setBackground(new Background(new BackgroundImage(new Image(inputStream, 500, 500, true, true), BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, new BackgroundSize(pane.getWidth(), pane.getHeight(), false, false, false, true)))); In this case the image would be loaded with a resolution of 500 x 500 and resized into pane.getHeight and pane.getWith.
Answers 2
The original image is 307 X 594. You cannot expect that it would smoothly be resized down. It would be better to use something more scalable.
However it tried to load it from a java code saving ratio and with smooth scaling, it seems to crate bearable results. I do not see a way how to do it in css. So, i suggest you do rescaling programmatically.
I have a simple program here which you can use for experimenting.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.image.Image; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.Background; import javafx.scene.layout.BackgroundImage; import javafx.scene.layout.BackgroundPosition; import javafx.scene.layout.BackgroundRepeat; import javafx.scene.layout.BackgroundSize; import javafx.stage.Stage;; public class MyImage extends Application { @Override public void start(Stage stage) throws Exception { AnchorPane root = new AnchorPane(); Image img = new Image("file:/image.png", 55, 0, true, true); System.out.println("Image: " + img.getHeight() + " X " + img.getWidth()); BackgroundImage bgImage = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT); Background bg = new Background(bgImage); root.setBackground(bg); Scene scene = new Scene(root, 600, 600); stage.setScene(scene); stage.show(); } public static void main(String args[]) { launch(args); } } Answers 3
The problem is nothing to do with CSS or Java code, It's an image processing issue that when you reduce the size of an image, the quality and sharpness of edge will be distorted.
As @serge mentioned, your image dimensions are 307 in height and 594 in width, so you should find the exact reduced width and height correspondent to your aspect ratio, you can use tools like Image aspect ratio and resizing calculator to find the best numbers for your purpose. I used your image on 93 X 180 pane, and the result was like this:
As you see on my Hello World! sample, the left image quality is not good enough, especially in edges and borders.
Solutions:
- Resize the image in your desired dimensions using tools like Photoshop. you can get more information in How To Resize An Image on Photoshop And Keep It Sharp
- Convert your original PNG images to a vector format like SVG.You can use some online tools like ONLINE PNG TO SVG CONVERTER
0 comments:
Post a Comment