如何从数据库中检索图像（字节类型）到 tableview (imageView)/JavaFx

Question

我有两种不同的类型（字节到模型和 imageView 到视图），所以我不得不使用两个类“ProductTableColumnModel”（图片列的帮助类）和模型“产品”

pictureColumn.setCellValueFactory(new PropertyValueFactory<ProductTableColumnModel, ImageView>("picture"));

但其他列是这样的：

descColumn.setCellValueFactory(new PropertyValueFactory<Product, String>("description"));

产品类别：

public class Product {


private byte[] picture;

@Column(name= "picture")
public byte[] getPicture() {
    return this.picture;
}

public void setPicture(byte[] picture) {
    
    this.picture = picture;
}
}

ProductTableColumnModel 类：

public class ProductTableColumnModel {


private ImageView picture;


public ImageView getPicture() {
    return this.picture;
}

public void setPicture(ImageView picture) {
    this.picture = picture;
}

在 ProductViewController 类中：

@FXML
TableView <Product> table_Products;

@FXML
TableColumn <Product, String> productName;

@FXML
TableColumn <Product, String> descColumn;

@FXML
TableColumn <ProductTableColumnModel, ImageView> pictureColumn;

.....

// show data in TableView
for(Product  p : getProducts() ) {
        
        Product product = new Product();
        
        product.setProductName(String.valueOf(p.getProductName() ));
        product.setDescription(String.valueOf(p.getDescription()));
        
        byte[] pictureImageInByte = p.getPicture(); 
        
        if(pictureImageInByte != null) {
            
            ByteArrayInputStream imageDate = new ByteArrayInputStream(pictureImageInByte);
            
            Image image = new Image(imageDate);
            
            /* ???????

            */
        }
        tableData.addAll(product);
    }
    /* set table items */
    table_Products.setItems(tableData);
private void intializeTableColumns() {
    
    
    tableData = FXCollections.observableArrayList();
    
    productName.setCellValueFactory(new PropertyValueFactory<Product, String>("productName"));
    
    descColumn.setCellValueFactory(new PropertyValueFactory<Product, String>("description"));
    
    pictureColumn.setCellValueFactory(new PropertyValueFactory<ProductTableColumnModel, ImageView>("picture"));
    

}

任何人都可以帮助我在此之后编写正确的代码吗？

if(pictureImageInByte != null) {

        ByteArrayInputStream imageDate = new ByteArrayInputStream(pictureImageInByte);

        Image image = new Image(imageDate);

        /* ???????

        */
    }

Answer 1

如果您有一个TableView<Product> ，那么对于某些T ，每一列都必须是TableColumn<Product, T> 。

每列的T可以不同，但​​应该始终是“数据类型”，而不是“UI 类型”（即它永远不应该是Node的子类）。

在这里你应该有

@FXML
TableColumn <Product, byte[]> pictureColumn;

因为您在列的每个单元格中显示的数据是byte[] 。

您可以使用通常描述如何显示单元格数据的cellFactory来创建ImageView以在列中的单元格中显示：

private void intializeTableColumns() {

    // ...

    pictureColumn.setCellValueFactory(cellData -> 
        new SimpleObjectProperty<>(cellData.getValue().getPicture()));

    // or
    // pictureColumn.setCellValueFactory(new PropertyValueFactory<>("picture"));
    // but the previous version is much better

    pictureColumn.setCellValueFactory(col -> new TableCell<>() {
        private WritableImage image = new WritableImage(WIDTH, HEIGHT);
        private ImageView imageView = new ImageView(image);

        @Override
        protected void updateItem(byte[] imageData, boolean empty) {
            super.updateItem(imageData, empty) ;
            if (empty || imageData == null) {
                setGraphic(null);
            } else {
                PixelWriter pw = image.getPixelWriter();
                // modify the following as needed if you have a different format
                PixelFormat<ByteBuffer> format = PixelFormat.getByteRgbInstance();
                pw.setPixels(0, 0, WIDTH, HEIGHT, format, imageData, 0, 3*WIDTH);
                setGraphic(imageView);
            }
        }
    });

    // ...
}

显然，您需要在此处填写一些信息，例如图像的宽度和高度（我刚刚假设它们是常数），并根据图像在byte[]数组中的编码方式进行修改。