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.

Answer 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>