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.
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.
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.
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
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
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
};
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With