如何将 JSON 格式的 blob 数据转换为图像并以角度显示

Question

我已使用 spring CommandLineRunner 将图像存储到 h2 内存数据库中。图像存储在数据库中，我也可以获取它。图像以 BLOB 格式存储。我想通过从 Angular 7 应用程序发出 http get 请求来获取图像，并通过从 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);

    }

}

实体；

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;
    }

}

Angular 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

您可以通过这样做来设置 blob 数据

首先从 api 或任何你使用的东西中获取 blob 数据

在组件中定义imgSrc变量

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

那么在你看来，只需像这样使用它

<img [src]="imgSrc" />

如果您有任何问题，请告诉我

Answer 2

我可以自己解决问题，这里是解决方案；

从您的 Angular 前端发出 http get 请求。收到响应后，对响应进行清理，然后将字符串转换为图像。下面是代码示例。

休息控制器

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

POJO 测试字符串

package com.example.demo.model;

public class TestString {
    String testString;

    public String getTestString() {
        return testString;
    }

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


}

产品服务类

    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 + "]";
    }   


}

产品详情 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>