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

时间：2019-05-01 10:04:07

标签： angular spring-boot

我已经使用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));
  }

2 个答案:

答案 0 :(得分：0)

您可以通过此操作设置Blob数据

首先从api或您使用的任何内容中获取blob数据

在组件中定义imgSrc变量

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

然后在您的视图中只需像这样使用它

<img [src]="imgSrc" />

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

答案 1 :(得分：0)

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

从角度前端发出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 + "]";
    }   


}

产品详细信息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>
相关问题
最新问题