Java FX how to Circle o round a image retrieved from DB

Question

I have this code for getting a image by an ID in a class called visitantes:

public Image getImageById(String id) throws SQLException, IOException  {
            try (
                    ConexionSQL cn = new ConexionSQL();
                    Connection con = cn.conexion();
                PreparedStatement ps = con.prepareStatement(
                    "SELECT foto_visi FROM visitantes WHERE cedula_visi = ?");
            ) {
                ps.setString(1, id);
                ResultSet results = ps.executeQuery();
                Image img = null ;
                if (results.next()) {
                    Blob foto = results.getBlob("foto_visi");
                    InputStream is = foto.getBinaryStream();
                    img = new Image(is) ; // false = no background loading 
                    is.close();
                }
                results.close();
                return img ;
            } catch (Throwable e) {
                String info = e.getMessage();
                System.out.println(info);
            }
            return null;

And this is the service in the class called ver_visitantes:

private final Service<Image> imageRetrievalService = new Service<Image>() {// cargar imagen en visitantes
    @Override
    protected Task<Image> createTask() {
        final String id;
        final visitantes visitante = tbvisitantes.getSelectionModel().getSelectedItem();
        if (visitante == null) {
            id = null;
        } else {
            id = visitante.getcedula();
        }
        return new Task<Image>() {
            @Override
            protected Image call() throws Exception {
                if (id == null) {
                    return null;
                }
                return visitante.getImageById(id);
            }
        };
    }
};

and i show the image this way:

imgfotovisi.imageProperty().bind(imageRetrievalService.valueProperty());

at this point is working , no problems.

But now I need the retrieved image into a circle shape or the css to do that. how can get that image into a circle o round the borders?? I'm trying like this:

    Image im = imgfotovisi.getImage();
    circulo.setFill(new ImagePattern(im));

But the Image variable is null.circulo is a circle shape

    ... 58 more
Caused by: java.lang.NullPointerException: Image must be non-null.
    at javafx.scene.paint.ImagePattern.<init>(ImagePattern.java:235)

.I need some like

circulo.setFill(imgfotovisi);

I read this How to set an image in a circle and help me a little , but in that example the image is in the web. And in this other post JavaFX Circle and ImageView I can't understand the code.

I have this in the css

.image-view {
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);
    -fx-stroke-width: 2.0;
    -fx-border-radius: 20 20 20 20;
    -fx-background-radius: 10 10 10 10;
    -fx-padding: 10;
    -fx-background-color: firebrick;
}

it round the corners but I want an entire circle. If it's possible in CSS, it will be perfect.

I hope you can understand all the problem and can help me.

This is my original post about show images from DB.

Are you sure that you are calling `imgfotovisi.getImage()` after `Task` is finished? — mr mcwolf, Dec 14 '17 at 07:39
i can see the image in the imageview,but i dont know exactly ,whe the task is finished. — Yolfran Montaño Corredor, Dec 14 '17 at 16:07
@mrmcwolf the imgfotovisi is filled in the initialize.i can also call imgfotovisi.getImage() in the initialize but it still null. — Yolfran Montaño Corredor, Dec 14 '17 at 16:17
Check this link ,maybe is helpful for you https://gist.github.com/jewelsea/7904493 — Menai Ala Eddine - Aladdin, Dec 14 '17 at 18:16

SedJ601 · Answer 1 · 2017-12-14T14:45:22.787

1

This is not a CSS approach, but you can use a StackPane with a Circle and ImageView.

Pure code approach

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication66 extends Application
{

    @Override
    public void start(Stage primaryStage)
    {
        Circle background = new Circle();
        background.setRadius(50);
        background.setFill(Color.BLUE);

        Image image = new Image(getClass().getResourceAsStream("chevron-6.png"));
        ImageView imageView = new ImageView(image);
        imageView.setFitHeight(50);
        imageView.setFitWidth(50);

        StackPane root = new StackPane();
        root.getChildren().addAll(background, imageView);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}

FXML approach

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Circle?>


<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Circle fill="DODGERBLUE" radius="100.0" stroke="BLACK" strokeType="INSIDE" />
      <ImageView fitHeight="75.0" fitWidth="78.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../Pictures/arrows/chevron-6.png" />
         </image>
      </ImageView>
   </children>
</StackPane>

edited Dec 14 '17 at 14:45

answered Dec 14 '17 at 14:36

SedJ601

12,173
3
41
59

i can do that with a image that i put with the scene buildier, but when i try with the retrieved image its not posible.i can see the retrieved image in the imageview ,but i cant take it into the circle.i wll try your method :) – Yolfran Montaño Corredor Dec 14 '17 at 16:10
Are you saying that when you try to do this using pure code it's not working correctly? If so, you must have a `StackPane` with the `Circle` added first and then add the `ImageView`. – SedJ601 Dec 14 '17 at 16:12
https://imgur.com/a/IZaf5 there is some results.if i use Image im = imgdefault.getImage(); circulo.setFill(new ImagePattern(im)); ,it work,bus if i try with imgfotovisi , doesnt work – Yolfran Montaño Corredor Dec 14 '17 at 17:36
Make `imageView.setFitHeight(50);` and `imageView.setFitWidth(50);` value smaller until you get your desired result. – SedJ601 Dec 14 '17 at 17:40
If you are using `FXML` set all of the properties there. Then use `imabat.setImage(..)` in your code. – SedJ601 Dec 14 '17 at 19:43
Come on man. If you want any further help, you are going to need to post the exact code that's giving you this result. You could also probably remove any `CSS` that you were using before you tried this new approach. – SedJ601 Dec 14 '17 at 19:59
You got `imageview.setFitWidth(100)`. How about you reduce that number. – SedJ601 Dec 14 '17 at 20:00
the problem is in this line of my code: imgfotovisi.imageProperty().bind(imageRetrievalService.valueProperty()); ,the code put the image in the imageview.but if I try to get that image ,say its null,BUt i can see the retrieved image in the imageview.I dont know why is null when imgfotovisi.getImage(); I think i need to open new post with all the code. – Yolfran Montaño Corredor Dec 14 '17 at 21:17

Java FX how to Circle o round a image retrieved from DB

1 Answers1