load image using byte array in angular

Question

I have the below method in my angular component:

   <li *ngFor="let item of list1._subList" onclick="SelectImage()" class="active">
              <img alt="img"  [src]="getImage(resp.data_values[0])| secure | async"
              />
              <p>{{generateDisplayImgName(item.values[0])}}</p>
            </li>



 getImage(ficname: string) {
     let obj: any;
     // remember 5th question represents the zip file name
    obj = {"fileName":StringUtil.extractSubstring(5,ficname.length,ficname),"zipFileName":this.something,"terminalTypeId":5}
    return this.projectService.extractStudioImage(this.id1,this.id2,this.id3,obj).subscribe((data)=>{

      let objectURL = 'data:image/png;base64,' + data;
      if(ficname.includes('jpg')){
        objectURL = 'data:image/jpg;base64,' + data;
      }
      console.log(objectURL);
      return objectURL;
    })
  }

Below is the code for my httpCLient.

  extractStudioImage(id1,id2,id3,json){
      const headers = new HttpHeaders();

      let params = new HttpParams();
      params = params.set('a1', id1);
      params = params.set('a2',id2);
      params = params.set('a3',id3);

      return this._http.post(ServerAddress.getInstance().getValue() + this.extractStudioPhotoUrl, json,{
        headers: headers,
        params:params,
      });
    }

I works because, I can see the images in Fiddler. Now the problem is angular keeps attempting to parse JSON (in this case the byte representation of my image). I am not explicitly trying to parse any json.

Using my chrome debugger: I see this: It is an HttpResponseError

Unexpected token � in JSON at position 0

I don't see what is wrong in my approach.

I'm confused about where the attempted JSON parsing would happen in this above code. Is it right inside the above lines of code, or in projectService.extractStudioImage, which isn't shown? — kshetline
– kshetline, Commented Jan 21, 2022 at 18:06
I have added some information regarding the misunderstanding — Nesan Mano
– Nesan Mano, Commented Jan 21, 2022 at 18:09
Does the error indicate a line in your code? My problem with understanding what's going on is that there's nothing in the code shown that clearly invokes JSON parsing. Is there HttpClient code elsewhere, for instance, that isn't shown? — kshetline
– kshetline, Commented Jan 21, 2022 at 18:15
The error does not indicate a line in my code but rather a parsing error in the request/response pipeline. vendor.js and pollyfills.js. It is out of my reach. — Nesan Mano
– Nesan Mano, Commented Jan 21, 2022 at 18:23
There is an HtttClient request going on somewhere, however, right? Because that's the most likely place for this error to be happening. I believe Angular assumes JSON as a default when doing a get. — kshetline
– kshetline, Commented Jan 21, 2022 at 18:27

lezhumain · Accepted Answer · 2022-01-21 20:59:32Z

1

You get this error because the http module you're using in your service expect json response type by default.

You need to tell it to accept "blob", and probably add the Accept: image/png header as well.

extractStudioImage(id1,id2,id3,json) {
  const headers = new HttpHeaders();
  headers.append("Accept", "image/png");
  
  let params = new HttpParams();
  params = params.set('a1', id1);
  params = params.set('a2',id2);
  params = params.set('a3',id3);

  return this._http.post(ServerAddress.getInstance().getValue() + this.extractStudioPhotoUrl, json,
    {
      responseType: "blob",
      headers: headers,
      params: params
  });
}

and the create the url from the blob in your component:

getImage(ficname: string) {
   let obj: any;
   // remember 5th question represents the zip file name
  obj = {"fileName":StringUtil.extractSubstring(5,ficname.length,ficname),"zipFileName":this.something,"terminalTypeId":5}
  return this.projectService.extractStudioImage(this.id1,this.id2,this.id3,obj).subscribe((data)=>{

    const objectURL = URL.createObjectURL(da);
    console.log(objectURL);

    return objectURL;
  })
}

edited Jan 21, 2022 at 20:59

answered Jan 21, 2022 at 18:29

lezhumain

4153 silver badges9 bronze badges

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

6 Comments

Nesan Mano Over a year ago

Thanks, that problem is solved. The image is not showing up.

SomeStudent Over a year ago

@NesanMano so above would, i suspect, return an actually byte array, you would also probably need to then convert said byte array to a base64 string.

lezhumain Over a year ago

@NesanMano I've updated my comment, to use "blob" instead and add component example

Nesan Mano Over a year ago

@lezhumain It is simply not working. I have even followed this tutorial: medium.com/techinpieces/…

lezhumain Over a year ago

@NesanMano What error do you get? Can you see both the ReQuest and Response from the HTTP call to get the image ?

|

Nesan Mano · Accepted Answer · 2022-01-25 16:46:52Z

0

I have found the solution.

I the HTML section, I simply do this:

<img alt="img" [id]="generateDisplayImgName(resp.data_values[0])" #refEl [src]="loadImageFromLocalStorage(generateDisplayImgName(resp.data_values[0]),refEl)"

 getImage(ficname: string){
     let obj: any;

     // remember 5th question represents the zip file name
      obj = {"fileName":ficname,"zipFileName":this.c._list.filter(a=>a.qN===5)[0].answer,"typeId":5}
      this.projectService.extractStudioImage(this.a,this.b,this.c,obj).subscribe((data:Blob)=>{

        this.createImageFromBlob(ficname,data);
        return this.imageBlobUrl;
    });
  }

  createImageFromBlob(ficname:any , image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", (evt) => {
      let res = evt.target.result;

      // Store Data URL in localStorage
      try {
        if (typeof res === "string") {
          localStorage.setItem(ficname, res);
          this.dixieDbService.addNewImage("giobu"+ficname, res).then(r => console.log("inserted: "));
        }
      }
      catch (e) {
        console.log("Storage failed: " + e);
      }
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

The technic is to use blob and handle it using try/catch as well as events. This is because we simply want to await for the incoming stream.

answered Jan 25, 2022 at 16:46

Nesan Mano

2,1883 gold badges31 silver badges50 bronze badges

3 Comments

Nesan Mano Over a year ago

You also mentioned to use blob. I have to avoid making multiple requests to the server. In order to implements that, I had to use the and indexedDB. This is widely used by many big tech firms.

lezhumain Over a year ago

I don't think storing image is the localStorage is widely used at all (just look at your localStorage in any website, you'll never find any image in there). This is usually done by making use of HTTP caching. Anyway I'm glab youy found your solution, although still very intrigued in what didn't work with mine

Nesan Mano Over a year ago

localstorage was just a try. My solution is to use the indexedDB. I am having an issue with that. I would really appreciate that if you can take a look : stackoverflow.com/questions/70818486/…

Collectives™ on Stack Overflow

load image using byte array in angular

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related