How to get a bytearray converted into a image in angular 8

Question

I have created a database to hold images that can when sending a post request match the form input and map it to a specific Qrcode and send that as a byte array to the angular frontend. Right now I am using a onSubmit function to run the the post. How do you get turn the incoming byte array response to a image in ur using I have looked all over stack overflow and see that most of the answers are out dated.

onSubmit(structure: Structure, san: DomSanitizer) {
this.isSubmitted = true;
if (!this.registrationForm.valid) {
  return false;
} else {
  return this.http.post(this.serverURL, structure).toPromise().then((data: any) => {
    this.image = data;
  });
}

}

Can you please try this https://stackoverflow.com/questions/4564119/how-to-convert-a-byte-array-into-an-image — Siddharth Pal, Dec 19 '19 at 19:11
@SiddharthPal thank you for your comment I actually derived my answer from this article https://stackoverflow.com/questions/36152917/get-image-or-byte-data-with-http — BlaineA, Dec 19 '19 at 19:36

BlaineA · Accepted Answer · 2020-02-11T21:26:40.217

A quick follow up to this. I have added a few things in that seem to work hope this helps anyone along the way:

public onSubmit(structure: Structure) {
this.isSubmitted = true;
if (!this.registrationForm.valid) {
  return false;
} else {
  return this.http.post(this.serverURL, structure, {responseType: 'blob'}).subscribe(blob => {
    const urlCreator = window.URL;
    this.image = this.san.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
  });
}

}

Quick side note** If someone can explain to me why this works and what is going on that is behind the scenes I would be greatful.

How to get a bytearray converted into a image in angular 8

1 Answers1