Как преобразовать данные BLOB-объекта в формате JSON в изображение и отобразить в угловом формате

Question

Я сохранил изображение в базе данных h2 в памяти, используя Spring CommandLineRunner.Изображение хранится в базе данных, я также могу получить его.Изображение хранится в формате BLOB.Я хочу получить изображение, отправив запрос http get из приложения angular 7, и отобразить изображение путем преобразования из BLOB в формат .jpg.Я не уверен, как этого добиться.Любая помощь будет принята с благодарностью.

Код для чтения файла изображения и сохранения в базе данных;

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;

import java.io.File;
import java.io.FileInputStream;

import org.springframework.beans.factory.annotation.Autowired;

import com.example.demo.dao.ProductDAO;
import com.example.demo.dao.ProductDetailsDAO;
import com.example.demo.model.Product;
import com.example.demo.model.ProductDetails;

@Component
public class CommandLineRunnerDemo implements CommandLineRunner {

    @Autowired
    ProductDAO productDao;

    @Autowired
    ProductDetailsDAO productDetailsDao;

    Product product = new Product();
    Product product1 = new Product();

    ProductDetails productDetails = new ProductDetails();
    ProductDetails productDetails1 = new ProductDetails();

    @Override
    public void run(String... args) throws Exception {
//      public void run(String... args) throws Exception {
        System.out.println("Pratap: Printing from CLR");
        product.setProductID(1);
        product.setProductName("CLR 1");
        product.setProductType("Type 1");

        productDetails.setProductID(product.getProductID());
        productDetails.setProductDescription(product.getProductName()+" "+product.getProductType());

        ClassLoader classLoader = ClassLoader.getSystemClassLoader();
        File file = new File(classLoader.getResource("image.jpg").getFile());
        System.out.println("File Found : " + file.exists()+ " File length: "+(int)file.length());
        byte[] bFile = new byte[(int) file.length()];

        try {
            FileInputStream fileInputStream = new FileInputStream(file);
            fileInputStream.read(bFile);
            fileInputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

        productDetails.setIcon(bFile);
        product.setProductDetails(productDetails);
        productDetailsDao.save(productDetails);


        productDao.save(product);

        product1.setProductID(2);
        product1.setProductName("CLR 2");
        product1.setProductType("Type 2");

        productDetails1.setProductID(product1.getProductID());
        productDetails1.setProductDescription(product1.getProductName()+" "+product1.getProductType());
        product1.setProductDetails(productDetails1);

        productDetailsDao.save(productDetails1);

        productDao.save(product1);

    }

}

Entities;

import javax.persistence.*;

@Entity
public class Product {
    @Id
    @Column(name="Product_ID")
//  @GeneratedValue
    int productID;

    @Column(name="Product_Name")
    String productName;

    @Column(name="Product_Type")
    String productType;

    @OneToOne
    @JoinColumn(name = "Product_ID", nullable = false, insertable=false, updatable=false)
    private ProductDetails productDetails;

    public ProductDetails getProductDetails() {
        return productDetails;
    }

    public void setProductDetails(ProductDetails productDetails) {
        this.productDetails = productDetails;
    }

    public int getProductID() {
        return productID;
    }

    public void setProductID(int productID) {
        this.productID = productID;
    }

    public String getProductName() {
        return productName;
    }

    public void setProductName(String productName) {
        this.productName = productName;
    }

    public String getProductType() {
        return productType;
    }

    public void setProductType(String productType) {
        this.productType = productType;
    }   


}

package com.example.demo.model;

import javax.persistence.*;

@Entity
public class ProductDetails {

    @Id
    @Column(name="Product_ID")
//  @ManyToOne
    int productID;

    String productDescription;

    @Lob
    @Column(name="icon")
    byte[] icon;

    @Lob
    @Column(name="image")
    byte[] image;

    public byte[] getIcon() {
        return icon;
    }

    public void setIcon(byte[] icon) {
        this.icon = icon;
    }

    public byte[] getImage() {
        return image;
    }

    public void setImage(byte[] image) {
        this.image = image;
    }

    public int getProductID() {
        return productID;
    }

    public void setProductID(int productID) {
        this.productID = productID;
    }

    public String getProductDescription() {
        return productDescription;
    }

    public void setProductDescription(String productDescription) {
        this.productDescription = productDescription;
    }

}

Угловой http-вызов;

  getProductDetails(productID: number): Observable<ProductDetails> {
    console.log('Before calling product details for a product'+productID);
    this.url = 'http://localhost:8080/products/'+productID+'/productdetails';
    return this.http.get<ProductDetails>(this.url).pipe(retry(3),catchError(this.errorHandler));
  }

Answer 1

Я мог бы решить проблему самостоятельно, и вот решение;

Ошибка http: получить запрос от вашего углового интерфейса.Когда ответ получен, обработайте ответ и затем преобразуйте его в изображение.Ниже приведен пример кода.

Контроллер покоя

@RequestMapping(path="/products/test", method=RequestMethod.GET)
(productService.getImageString(1),HttpStatus.OK);
    public TestString getStringImage() {
        return productService.getImageString(1);
    }

POJO TestString

package com.example.demo.model;

public class TestString {
    String testString;

    public String getTestString() {
        return testString;
    }

    public void setTestString(String testString) {
        this.testString = testString;
    }


}

Класс ProductService

    public TestString getImageString(int productID) {
        ProductDetails prdDtls = productDao.findById(productID).getProductDetails();
        String encodeBase64;
        encodeBase64 = Base64.getEncoder().encodeToString(prdDtls.getIcon());
        TestString testStr = new TestString();
        testStr.setTestString(encodeBase64);
        return testStr;
    }

productDao.findById(productID) возвращаетпродукт и продукт POJO

package com.example.demo.model;

import javax.persistence.*;

@Entity
public class Product {
    @Id
    @Column(name="Product_ID")
//  @GeneratedValue
    int productID;

    @Column(name="Product_Name")
    String productName;

    @Column(name="Product_Type")
    String productType;

    @OneToOne
    @JoinColumn(name = "Product_ID", nullable = false, insertable=false, updatable=false)
    private ProductDetails productDetails;

    public ProductDetails getProductDetails() {
        return productDetails;
    }

    public void setProductDetails(ProductDetails productDetails) {
        this.productDetails = productDetails;
    }

    public int getProductID() {
        return productID;
    }

    public void setProductID(int productID) {
        this.productID = productID;
    }

    public String getProductName() {
        return productName;
    }

    public void setProductName(String productName) {
        this.productName = productName;
    }

    public String getProductType() {
        return productType;
    }

    public void setProductType(String productType) {
        this.productType = productType;
    }

    @Override
    public String toString() {
        return "Product [productID=" + productID + ", productName=" + productName + ", productType=" + productType
                + ", productDetails=" + productDetails + "]";
    }   


}

ProductDetails POJO

package com.example.demo.model;

import javax.persistence.*;

@Entity
public class ProductDetails {

    @Id
    @Column(name="Product_ID")
//  @ManyToOne
    int productID;

    String productDescription;

    @Lob
    @Column(name="icon")
    byte[] icon;

    @Lob
    @Column(name="image")
    byte[] image;

    public byte[] getIcon() {
        return icon;
    }

    public void setIcon(byte[] icon) {
        this.icon = icon;
    }

    public byte[] getImage() {
        return image;
    }

    public void setImage(byte[] image) {
        this.image = image;
    }

    public int getProductID() {
        return productID;
    }

    public void setProductID(int productID) {
        this.productID = productID;
    }

    public String getProductDescription() {
        return productDescription;
    }

    public void setProductDescription(String productDescription) {
        this.productDescription = productDescription;
    }

}

Это был мой бэкэнд.Вот мой угловой код:

  getImageString(): Observable<any>{
    return this.http.get<any>("http://localhost:8080/products/test").pipe(retry(3),catchError(this.errorHandler));
  }

Вышеуказанный метод вызывается следующим компонентом

import { Component, OnInit, Pipe } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { error } from '@angular/compiler/src/util';
import { ProductServiceService } from 'src/app/product-service.service';
import { ProductDetails } from 'src/app/product-details';
import {DomSanitizer} from '@angular/platform-browser';


@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {

  imageSrc: any;
  testStr: {'testString': string};

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {  }

  getImageString(){
    this.productService.getImageString().subscribe(data=>{
      this.testStr=data;
      this.imageSrc=this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
      + this.testStr.testString);
    },error=>{
      let txt: any;
      let k: any;
      txt = '';
      for (k in error) {
        txt += error[k];
      }
      console.log('Image could not be fetched '+txt);});
  }

И, наконец, мой HTML-код

<button class="btn btn-primary" (click)="getImageString()">Get Image</button>

<div *ngIf="imageSrc!=null">
    <img [src]="imageSrc">
</div>

Answer 2

Вы можете установить данные BLOB-объекта, выполнив это

Сначала получите данные BLOB-объекта из API или из того, что вы используете

определите переменную imgSrc в компоненте

const blob = await this.service.getImageBlob();
imgSrc.setAttribute("src", URL.createObjectURL(blob));

Затемпо вашему мнению, просто используйте его следующим образом

<img [src]="imgSrc" />

Пожалуйста, дайте мне знать, если у вас возникли проблемы