How to convert blob data in JSON format to image and display in angular

Question

I have stored an image into h2 in-memory database using spring CommandLineRunner. The image is stored in the database I am also able to fetch it. The image is stored in BLOB format. I want to fetch the image by issuing http get request from angular 7 app and display the image by converting from BLOB to .jpg. I am not sure how to achieve it. Any help would really be appreciated.

Code to read image file and save in database;

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

}

Angular http call;

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

user4851087 · Accepted Answer · 2019-05-01 11:31:26Z

1

You can set the blob data by doing this

First get the blob data from api or whatever you use

define imgSrc variable in component

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

Then in your view simply use it like this

<img [src]="imgSrc" />

Please let me know if you have any problem

answered May 1, 2019 at 11:31

user4851087

Sign up to request clarification or add additional context in comments.

Comments

Pratap · Accepted Answer · 2019-05-04 06:23:36Z

I could fix the problem myself and here is the solution;

Issue http get request from your angular front end. When response is received, then sanitize the response and then convert the sting to image. Below is the code example.

Rest controller

@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 class

    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) returns a product and the product POJO is

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

}

That was my back end. Here is my angular code;

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

The above method is invoked by the following component

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

And finally my html code

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

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

Collectives™ on Stack Overflow

How to convert blob data in JSON format to image and display in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related