Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

View blob response as image in angular

I am trying to get a blob response from a request, and then generate a URL from that blob and set this URL as an image's source.

But the image is not loading.

This is my HTML:

<img src="{{previewSignsrc}}" alt="Sign Thumbnail">

And this is my .ts file:

this.signModalDataService.getPreviewSignature({'name': this.SignatureName, 'font_type': 0});
    this.signModalDataService.previewSignature
      .subscribe((res) => {
        console.log(res);
        let blob = new Blob([res['_body']], {type: 'image/png'});
        this.previewSignsrc = URL.createObjectURL(blob);
        this.showPreviewSign = true;
      });

I used same method to set url for ng2-pdfviewer and it worked fine.

like image 649
Shoaib Iqbal Avatar asked Apr 09 '19 11:04

Shoaib Iqbal


People also ask

How do I convert a blob file to an image?

getContext("2d"); // Get the "context" of the canvas var img = document. getElementById("myimage"); // The id of your image container ctx. drawImage(img,0,0,width,height); // Draw your image to the canvas var jpegFile = canvas. toDataURL("image/jpeg"); // This will save your image as a //jpeg file in the base64 format.

What is blob format image?

A binary large object (BLOB or blob) is a collection of binary data stored as a single entity. Blobs are typically images, audio or other multimedia objects, though sometimes binary executable code is stored as a blob.


4 Answers

You can dislay image like this code

this.config.getData()
          .subscribe((blob : any) => {
            let objectURL = URL.createObjectURL(blob);       
            this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);

          });

If your data is base64 display like this

 this.config.getData()
      .subscribe((baseImage : any) => {
        let objectURL = 'data:image/jpeg;base64,' + baseImage.image;
         this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);

      });

Demo https://stackblitz.com/edit/display-image-from-api

like image 179
Hien Nguyen Avatar answered Oct 19 '22 06:10

Hien Nguyen


You can use new FileReader(); I tried so much codes and that's the only one that worked for me.

  var reader = new FileReader ();
 reader.readAsDataURL(response) <= from inner . subscribe
  reader.onload = (_event) => {
  this.retrieveURL = reader.result;
 }

 .html
 [src]="retrieve URL" 

Bear with me I typed from my cellphone

That's all no need to use sanitizers, hope it helps somebody out there, ooh I am using Angular8

like image 42
Memo 313 MediaSA Avatar answered Oct 19 '22 05:10

Memo 313 MediaSA


As was metioned earlier by Memo 313 MediaSA, FileReader works.

 const reader = new FileReader();
 reader.readAsDataURL(data); //FileStream response from .NET core backend
 reader.onload = _event => {
     url = reader.result; //url declared earlier
     image.nativeElement.src = url; //image declared earlier
 };
like image 3
SailorQaoar Avatar answered Oct 19 '22 05:10

SailorQaoar


If you use JsonConvert from a .Net API to return an object in which one of the fields is the image byte[] it will convert it to a base64 string. Then you don't need anything special when calling the api or displaying the image.

like image 1
user2866001 Avatar answered Oct 19 '22 04:10

user2866001